I'm trying to make a game in JavaScript and i need to get pixeldata from an image. i'm using getImageData().data; and it is working all good on Internet Explorer, but on Chrome i get this error:
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
I've been looking around for solutions but nothing seems to work, anyone have a good idea?
here is my code: `
var
width = 600,
height = 400,
img,
canvas,
ctx;
function main() {
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
init();
loop();
}
function init() {
img = new Image();
img.src = "test.png";
}
function update() {
}
function render() {
ctx.drawImage(img, 0, 0);
var data = ctx.getImageData(10, 10, 1, 1).data;
console.log(data);
}
function loop() {
window.requestAnimationFrame(loop);
update();
render();
}
main();`
The file is running localy and not on a server.
If you load your page or file using file://... it will trigger CORS issues as well.
When testing locally, always use a local server so you can load the files from localhost.
Also a side issue: remember to use the onload handler for the image:
function init() {
img = new Image();
img.onload = ... // don't start loop without it...
img.src = "test.png";
}
Try it:
function init() {
img = new Image();
img.crossOrigin = "Anonymous";
img.src = "test.png";
}
Related
I am just being a complete noob and been looking around for a answer. "ctx.fillRect(0,0,100,100);" works which mean ctx was declared correctly and "test()" is being called. I just don't understand why the image wont draw.
var Img = new Image();
Img.scr ='/client/Assets/StartScreen/Background.png'; //This URL was tested via html img tag
function test(){
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,100,100); //THIS WORKS
ctx.drawImage(Img,0,0,600,600); // Will not load
}
Img.scr ='/client/Assets/StartScreen/Background.png'; //This URL was tested via html img tag
Img.scr undefined property. You should try with Img.src
Img.src ='/client/Assets/StartScreen/Background.png';
Two things:
Your code had img.scr, not img.src.
Image loading happens asynchronously; you'll need to wait for the image to be complete (img.complete). You can use the onload event listener to draw things the instant the image is ready.
var img = new Image();
img.src = "/client/Assets/StartScreen/Background.png";
function draw() {
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 100, 100);
ctx.drawImage(img, 0, 0, 600, 600);
}
img.onload = function() {
draw();
};
You should add image to canvas only when it is loaded.
try,
var Img = new Image();
Img.src ='/client/Assets/StartScreen/Background.png';
Img.onload = function() {
test();
}
function test(){
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,100,100);
ctx.drawImage(Img,0,0,600,600);
}
I am trying to draw an image in the canvas. The image that I'm using is got as base64 string from the server. For testing purpose, I have saved the image to the disk both at the client and the server while debugging. The image is saved fine. While drawing in the canvas, the image is not rendered in Chrome and Firefox. But it works fine in IE 11.Is there any way to make the images draw in all the browsers.
var base64String = "data:image/png;base64,SUkqANZ1AQAAEbQhURQh0dUQ6mh0dHQ62ao6GIEQkpodHSEOqKiHXodDqaoh1NOqKaOjo6HU0dUQ6mqIdeh16dSUJQqJCmh0hUR0OvQ6HU0OqIdenXodTQ69DqidTVEdOpodIXIdDr1RDokXIdeh0OuQ6HXodDr0Oh16HQ6oh16HQ6mh1NDqioi6XS0OqKidcnXp16HTr0OqIdHQ69Dodch1PHX469D1EOvQ6HU0OqIdch0hUQ2h0dF0DVEOqI6HS2tgiHQ65Do6Qh1NDqiQqIdHU0OhiOhCHU0dOqL0OpqiHXodDpe0XR0OvQ6QqIdHVE69DqaHXpOADuamqIujo6IR1t1RHVEhHR0dBqiOi6OkI6BobS8IQgRF1RHSEDR0dA0hNypCEOqIhAilqtlCS1uEDSEDQmhpURCmh0XR1sYqI6Bo6og0NI6QkJCLoGhpSLpCGJCEJCQjoQh0dIVEdBEDRmACU.." //only few of the string is shared
function drwImage(base64String) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload=function(){
context.drawImage(img, 0, 0, 1, 1);
}
img.src = base64String;
}
Thanks for your help in advance.
Seems something related to the serialized image, as you can see in the snippet below, it works on Chrome, I used an online encoder.
As you can read here the datauri is almost supported at all.
var base64String = "data:image/jpeg;base64,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" //only few of the string is shared
drwImage(base64String);
function drwImage(b) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
console.log('load')
context.drawImage(img, 0, 0, 1, 1);
document.body.appendChild(img);
}
img.onerror = function() {
console.log('error')
}
img.src = b;
}
I have an image like this
<img id='my_img' src='www.someimage.com'>
And I have created this function to take the IMG node and convert it to a canvas and the base 64 data
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg|jpeg|pdf);base64,/, "");
}
The function is called like
getBase64Image(document.getElementById("my_img"));
But when I send a image, it just returns an image that is cliped, it only returns the top left corner of the image here is what it returns for this image
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
And this is the image
Why is the image that is returned being clipped?
I think that promises are useful in situations like these:
function getBase64Image(url) {
var promise = new Promise(function(resolve, reject) {
var img = new Image();
// To prevent: "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
img.crossOrigin = "Anonymous";
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
resolve(dataURL.replace(/^data:image\/(png|jpg|jpeg|pdf);base64,/, ""));
};
img.src = url;
});
return promise;
};
// CORS (Cross-Origin Resource Sharing) is enabled for Facebook images; but that's not true for
// all images out there!
var url = "https://scontent.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/12294845_10153267425828951_7985428593018522641_n.jpg?oh=2bb55736fce035311c3d60a1ca559426&oe=57210504";
var promise = getBase64Image(url);
promise.then(function (dataURL) {
console.log(dataURL);
});
https://jsfiddle.net/5tjov243/2/
Resources:
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes
Make sure you are doing this after the image is fully loaded, and I don't know why you are doing the regex at the end, it works fine for me without it.
img.onload = function() {
res = getBase64Image(img);
document.getElementById('result').src = res;
};
http://jsfiddle.net/z0phwzea/1/
Of course you will need to try the fiddle out on your own computer as it won't work with an external resource.
My requirement is to return data URL. But, when I run the application, there is an run-time error:
JavaScript runtime error: Unspecified error.
Here is the code that I have used. Temp path is the path where is location of image is.
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "#tempPath";
context.drawImage(img, 40, 40);
var dataURL = canvas.toDataURL("image/jpeg");
alert(dataURL);'
Try following code, It worked for me:
<body>
<canvas id="myCanvas"></canvas>
<img id="profileImg" alt=""/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
drawImg();
});
function drawImg() {
try {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = $('#profileImg');
context.drawImage(img, 40, 40);
var dataURL = canvas.toDataURL("image/jpeg");
alert(dataURL);
} catch (e) {
if (e.name == "NS_ERROR_NOT_AVAILABLE") {
// This is a bug in Firefox. The easiest fix is to simply keep trying until the error goes away,
//since no event fires at the correct time.
// Wait before trying again; you can change the length of this delay.
setTimeout(drawImg, 100);
} else {
throw e;
}
}
}
</script>
</body>
Works well with IE as well. Hope this helps.
I think this is a common known problem by some of you about CORS, only in IE (10 or 11).
Happens that I want to convert an image from svg to png and then send it to the server to be processed.
I'm using the saveSvgAsPng.js library, and I edited it to get the dataUri of my svg image as png:
out$.svgAsPngDataUri = function(uri, cb) {
//out$.svgAsDataUri(el, scaleFactor, function(uri) {
var image = new Image();
image.crossOrigin = "Anonymous";
image.src = 'http://localhost/terepss/tmp/'+uri;//Uri is the name of the svg image
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
if(cb) {
cb(canvas.toDataURL('image/png'));//Here is the problem
}
}
//});
};
As you can see, the image.src is localhost, same as my script, and even if I change it to 127.0.0.1 or my network's ip 192.168.0.12, it's throwing the same error.
What's wrong?
Thank you in advance.