0

CANVAS- to TEXTURE - THREE.WebGLState: DOMException: "The operation is insecure." Why?

Try to use existed canvas as texture for object but have error about I think ThreeJS lost context or something other ... :

Here is example:

jsfiddle code here:1:

Green btn work is ok. Is the simple canvas modification, but just press Red btn and look err at console and after that red btn, green not work anymore... with same err.

ERRs: FFox "THREE.WebGLState: DOMException: "The operation is insecure"

Chrome "THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded."

den.ts
  • 103
  • 1
  • 8
  • Welcome to stackoverflow. Please edit your question and write words like "btn" out as "button". Not all users are native english speaker and may do not know the abbreviation for a specific word. Also try to form whole sentences and take care of grammar, spelling and punctuation. Thanks! – hellow Aug 28 '18 at 07:43

1 Answers1

0

Tainted canvasses are canvases that may contain data from sources other than your page, and therefore you're not allowed to "read" their data because you could be using it to scrape remote images... at least that is my understanding. There is a way to set up your webserver to proxy those external images to you in a way that they won't taint your canvas.

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

manthrax
  • 4,918
  • 1
  • 17
  • 16
  • But this canvas just local canvas with store imgs from another server, how ThreeJS know about of origin information on this canvas? Maybe we can reset or set this arttr. of canvas ? – den.ts Aug 24 '18 at 08:21
  • It's a security feature of the browser.. not a part of three.js. Read the link I posted. – manthrax Aug 24 '18 at 08:45
  • as described I think I need to make localStorage copy of canvas as image and then apply to canvas for ex. ? – den.ts Aug 24 '18 at 08:54
  • I don't think that will work because you still have to read the canvas data to put it into localStorage. But I could be wrong.. My understanding is that you have to do something on YOUR SERVER. to PROXY the images to browsers visiting your site. – manthrax Aug 24 '18 at 19:41