Develop Reference

Internet Explorer canvas.toDataURL SecurityError

I run the following code on Internet Explorer, it throws a SecurityError on the line var canvasDataUrl = canvas.toDataURL();
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
canvasContext.drawImage(img,0,0);
var canvasDataUrl = canvas.toDataURL(); // error occurs here
console.log(canvasDataUrl);
};
img.src = 'https://via.placeholder.com/300x300';
What is the cause of that error, and how can I fix this ?

can you try crossOrigin
var img = new Image();
img.crossOrigin = "anonymous";
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var image = new Image();
image.crossOrigin = "anonymous";
image.onload = function (event) {
try {
canvasContext.drawImage(image, 0, 0, 200, 200);
console.log(canvas.toDataURL());
} catch (e) {
console.log(e);
}
};
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

The answer from #pc_coder is correct, and I want to provide some information about this error, you can see here https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
Because the pixels in a canvas's bitmap can come from a variety of
sources, including images or videos retrieved from other hosts, it's
inevitable that security problems may arise.
As soon as you draw into a canvas any data that was loaded from
another origin without CORS approval, the canvas becomes tainted. A
tainted canvas is one which is no longer considered secure, and any
attempts to retrieve image data back from the canvas will cause an
exception to be thrown.
If the source of the foreign content is an HTML or SVG
element, attempting to retrieve the contents of the canvas isn't
allowed.
If the foreign content comes from an image obtained from either as
HTMLCanvasElement or ImageBitMap, and the image source doesn't meet
the same origin rules, attempts to read the canvas's contents are
blocked.
Calling any of the following on a tainted canvas will result in an error:
Calling getImageData() on the canvas's context
Calling toBlob() on the element itself
Calling toDataURL() on the canvas
Attempting any of these when the canvas is tainted will cause a SecurityError to be thrown. This protects users from having private data exposed by using images to pull information from remote web sites without permission.

Phonegap | converting imageuri to base64 | getting black image after uploading it to server using jquery

I want a valid string of base64 from imageuri. I have use below code for this but it's getting black image after uploading it to the server.
function encodeImageUri(imageUri)
{
var c=document.createElement('canvas');
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
c.width=this.width;
c.height=this.height;
ctx.drawImage(img, 0,0);
};
img.src=imageUri;
var dataURL = c.toDataURL("image/jpeg");
return dataURL;
}
I have also tried other options but not getting solid solution to get the valid base64 imagedata. I don't want to upload image using file-transfer method. I want to convert the imageuri in simple base64 string. Please suggest me specific answer for the same.
Thanks

Please note that I've not tested this within PhoneGap.
It's possible you're being caught out by the image being loaded asynchronously; you're encoding it into a string before it's actually loaded and processed in full.
There are various ways of handling this; one possibility is to move to using a success() method to handle the return value, which will be called once the image has loaded and been drawn:
function encodeImageUri(imageUri, success)
{
var c=document.createElement('canvas');
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
c.width=this.width;
c.height=this.height;
ctx.drawImage(img, 0,0);
success(c.toDataURL("image/jpeg"));
};
img.src=imageUri;
}
You will then need to call encodeImageUri with a function that will handle the end result, for example:
encodeImageUri(" < url > ", function (data) {
console.log(data);
});
Depending upon the security model PhoneGap uses, you may have to look out for CORS-related issues (see Tainted canvases may not be exported).

Resize base64 image in firefox

I'm still new in coding and HTML5.
I have a HTML5 stage with multiple canvas. I need to get the base64 image from that stage and resize it, then get the base64 image of the resized canvas.
This is the code I use:
stage.toDataURL({
callback: function(dataUrl) {
var tmp_img = new Image();
tmp_img.src = dataUrl;
//resize image to 45x75
var canvas = document.getElementById('hidden_canvas');
canvas.width = 45;
canvas.height = 75;
var ctx = canvas.getContext("2d");
ctx.drawImage(tmp_img, 0, 0, canvas.width, canvas.height);
dataUrl = canvas.toDataURL();
)};
The dataUrl is correct in Chrome but when I run the code in Firefox, it seems that the Firefox didn't generate the correct base64 code.
I would really appreciate any help

You've stumbled upon a common problem.
tmp_img.src loads the dataUrl into your new image--but that takes time. So javascript continues with your code below that even before the image is loaded. The result is that you are sometimes trying to ctx.drawImage before tmp_img has been fully loaded and is ready to use.
The fix is to refactor your code to use tmp_img.onload. The .onload triggers a callback function when tmp_img is finally ready to use. The refactoring might look like this:
var tmp_img = new Image();
tmp_img.onload=function(){
//resize image to 45x75
var canvas = document.getElementById('hidden_canvas');
canvas.width = 45;
canvas.height = 75;
var ctx = canvas.getContext("2d");
ctx.drawImage(tmp_img, 0, 0, canvas.width, canvas.height);
dataUrl = canvas.toDataURL();
}
tmp_img.src = dataUrl;
// more javascript
JavaScript will execute the above code in this order:
Create a new Image object
See tmp_img.onload and make a not that it should do that code when the image is fully loaded
Set tmp_img.src and start loading the image.
Continue with "more javascript"
When the image is fully loaded, execute everything in the .onload callback function.
It looks like you're using KineticJS--are you?
If so, then instead of stage.toDataURL you could use stage.toImage. That way you already have the image loaded when the stage.toImage callback is executed (you don't have to worry about waiting for the image to load). Then just .drawImage the image that KineticJS provides in the callback.

Loading an image with external js file

I'm trying to load an image using an external js file that contains the following:
myimage = new Image(1,1);
myimage.src = 'http://myserver.com/pixel.gif';
I see the js file loaded and no error in the console, but also no call to my image pixel. Any idea?
EDIT:
After the first responses I tried the following and it still doesn't work:
var myimage = document.createElement("img");
myimage.src = 'http://myserver.com/pixel.gif';
myimage.height = "1";
myimage.width = "1";
document.body.appendChild(myimage);

The image needs to be inserted into the page/DOM.
The image will not be called until it is placed into the page/DOM directly, and therefore loaded.
What you want will happen with something like: document.body.appendChild(myimage)

There is an example of how to do this at http://www.w3schools.com/tags/canvas_drawimage.asp by inserting the image into a canvas.
A small modification which I found makes this work better is putting the drawImage line into an img.onload callback like this:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload(function() {ctx.drawImage(img,10,10);});

Importing remote image to a canvas

How can the user import image and put it within a canvas using Javascript??
All the lessons I have seen focus on importing images from identified sources.
for example:
var img = new Image();
img.onload = function(){
};
img.src = 'myImage.png'; // Set source path
This is fine but if I want the user imports the image from his computer >>> is that possible?

The code for that is here: http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/