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