0
\$\begingroup\$

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;
}

});

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

1 Answer 1

1
\$\begingroup\$

You cannot load and use images from other domains with HTML5 canvas. Make sure to serve your images from the same domain/server as your processing code. Alternatively, enable cross origin access on the server which is serving your image.

Read more here: https://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data

\$\endgroup\$
4
  • \$\begingroup\$ I've now ran it from a server... Now how do I set the Access-Control-Allow-Origin "*" header? \$\endgroup\$
    – Prolight
    Sep 22, 2018 at 1:10
  • \$\begingroup\$ Cordova that is. \$\endgroup\$
    – Prolight
    Sep 22, 2018 at 1:53
  • \$\begingroup\$ Haven’t worked with Cordova before but did you try this? stackoverflow.com/questions/37398695/… \$\endgroup\$
    – schteppe
    Sep 22, 2018 at 7:11
  • \$\begingroup\$ You could also try storing the image inside the HTML document itself using base64. I haven’t tried this but it might work base64image.org \$\endgroup\$
    – schteppe
    Sep 22, 2018 at 7:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .