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\$
  • \$\begingroup\$ Have you seen this? \$\endgroup\$ – Tyyppi_77 Sep 21 '18 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 '18 at 8:40
  • \$\begingroup\$ In that case I'm not really sure if I understand what the issue is. \$\endgroup\$ – Tyyppi_77 Sep 21 '18 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 '18 at 1:53
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\$
  • \$\begingroup\$ I've now ran it from a server... Now how do I set the Access-Control-Allow-Origin "*" header? \$\endgroup\$ – Prolight Sep 22 '18 at 1:10
  • \$\begingroup\$ Cordova that is. \$\endgroup\$ – Prolight Sep 22 '18 at 1:53
  • \$\begingroup\$ Haven’t worked with Cordova before but did you try this? stackoverflow.com/questions/37398695/… \$\endgroup\$ – schteppe Sep 22 '18 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 '18 at 7:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.