# Why can't I load images in processing.js and let them be dynamic?

I can't easily load images. I can only render an image once unless I put this: <img src="images/papermario.png" hidden></img> in my html. I also still need to be able to use..... get(x, y, w, h) to get the pixels of an image But I run into this error: processing.js:13709 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. when ever I operate it on the canvas. Also when I try to load the image sometimes it doesn't load.

So how should I fix it? (It still needs to be a processing js image object)

JS: var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); var processing = new Processing(canvas, function(processing) { processing.size(800, 800); processing.background(0xFFF);

 var mouseIsPressed = false; processing.mousePressed = function() { mouseIsPressed = true; }; processing.mouseReleased = function() { mouseIsPressed = false; }; var keyIsPressed = false; processing.keyPressed = function() { keyIsPressed = true; }; processing.keyReleased = function() { keyIsPressed = false; }; processing.getImage = function(url) { //Loading of the home test image - img1 var img1 = new Image(); //drawing of the test image - img1 img1.onload = function() { //draw image ctx.drawImage(img1, 0, 0); //ctx.fillStysle = "rgba(200, 0, 0, 0.5)"; //ctx.fillRect(0, 0, img1.width, img1.height); }; img1.src = url;//Set image url processing.externals.sketch.imageCache.add(img1.src); var img2 = processing.loadImage(img1.src); //img2.url = url; //img2.onload = img1.onload; return img2; }; // use degrees rather than radians in rotate function var rotateFn = processing.rotate; processing.rotate = function(angle) { rotateFn(processing.radians(angle)); }; with (processing) { var img1 = getImage("images/papermario.png"); //var img2 = createGraphics(180, 180, P2D); background(0, 0, 0); image(img1, 0, 0); //var img2 = get(0, 0, 400, 400); draw = function() { background(255, 255, 200); image(img1, 0, 0); //ctx.drawImage(img1, 0, 0);s //image(get(0, 0, 180, 180), 80, 80); //var img1 = getImage("images/papermario.png"); //img1.onload(); //image(img2, 40, 0, 40, 40); //image(img2, 0 + millis() / 1000, 0, 30, 30); }; } if (typeof draw !== 'undefined') { processing.draw = draw; } 

});

• Have you seen this? – Tyyppi_77 Sep 21 '18 at 6:52
• Yes, but It doesn't solve the problem... I need specific code for processing js because it has a special image object – Prolight Sep 21 '18 at 8:40
• In that case I'm not really sure if I understand what the issue is. – Tyyppi_77 Sep 21 '18 at 10:48
• I actually got it working in Cordova, I just need a way to set the ACAO header. – Prolight Sep 22 '18 at 1:53

• I've now ran it from a server... Now how do I set the Access-Control-Allow-Origin "*" header? – Prolight Sep 22 '18 at 1:10