SecurityError IE canvas.toDataURL('image/png') same server - javascript

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.

Related

How to store image locally from image URL by using jquery?

I want to store image locally and use it to anywhere in tizen application.
I tried by using canvas but canvas data uri not showing exact image which have in URL.
The snippet of code who I am using.
var img = new Image();
img.src = imageURL;
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var data = context.getImageData(x, y, img.width, img.height).data;
localStorage.setItem('image', data);
Your code does not work because you want save an array to localStorage. Instead of context.getImageData() you have to use canvas.toDataURL() and then convert dataURL to Base64 string image. After this you can save it to the localStorage.
Your image must be online and in the same domain like your script. It is because of Cross-origin resource sharing (CORS). But if you convert your image like me in dataURL before and then you should not have any problem.
And to localStorage you have today (in 2018) an access only in online mode. Please read:
localStorage access from local file
Full example
See this working example on codepen.io (link to example) because on StackOverflow the snippets are sandboxed and because of this we can not have an access to the localStorage.
var canvas = document.createElement('canvas');
var image = new Image();
var ctx = canvas.getContext('2d');
image.onload = function()
{
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
var dataURL = canvas.toDataURL('image/png');
var Base64StringImage = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
localStorage.setItem('image', Base64StringImage);
//read from localStorage:
document.querySelector('img').src = 'data:image/png;base64,' + localStorage.getItem('image');
};
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADnElEQVRYhaWXz2/cRBTHP/Y4zka0ShPQJluJLkl/0EsSl24OCAgRFQoH1Ir/oNmeEJdScYUDXOitSBxASFmQ4MSJay6EtojLgvIDCUKhaQIipCI/SlKy690Zc2jWa3ttT4Tn9p3v6H3fe/Pm2c/wPM/jYC25n1Nnl5L9emuLDbnIgBj18ba6S5857ONPHz5P3MqbIzh2meNi3N+Ls28Fye8bH/lE69C8O8NUzw1/f8GtMJl7L1Y0STjNvhUkz1iXsI0j/Nj4wj+0rqqhLPwpqx1ZSRPW2beC5LP2WxiGAeAfistCEKcJR8Xj7Ft1dgGwjSM+2c1RAFxvD6AjC0G8o+4xV3unQzgvRnC6yujsW627aHnUzdGQx780v0rNgnsg4AtHMvKEOJtq32rdRfBQNF3BqJNw2lWk2beih1xvr0M8GHUU62pAZ9/4q7ngpb3zb+vvs6XusKmWQwaPGUMURIkm+6n8T80vYx0qmOdx7DJmNKoFtxLCf6ufeTX3CRe6r/O4+TTHjCEmu9/lUs9n7KgVLR9dg+Y5Xsl9yFTPBwyIMSzdO99Wv7Imb1O0JthWK7js8pT1EhtykXVVBdDyAAPmGI59hYJ4JuSQBenvHGC+McMDtcoPjY/9vU25fCg+b44e1Egp9iosSH/nAMprhJ6b6+0hqfs4jd9RK8zV3u4QLojzOPZ0+xWkZWHMvsyw9TJg+FW8rqrM1t7U8tE+MWiew7GvMCicdgaCUUdxr1FkSFxgQy6yKZeR1FlXVY6LcfLmCHXvn1T+vloCkmvAqOw953+OC2aJTbXse10wS/SaT/JA/R4qKHjUePJilKb3byp/Xy6l18Dlx27HEtvqLgtuBUmjI41wcM+eq+VzRi+ztav+/gnxAmvyVtuBJOF7cg7w6DNPcTE3wx/yO+YbM0jPxbGnKYpJZmvXqLGTyo/bb4QEna5yvANR4fZ+tj7QL06Hoo5iK0k4uLL0gbiog9jqM4djf7Hajn2dqQ/ERR3E2hqAbH1AlwVtDWTtA9EsRLGxJX/z0mrgrPVapj4Q/AXfknfoF6dD2NDNBUmrlTGFZE3e9PdPiIkQDvaZ/zUXJAm3MnYxVwkJOl3TIayzr50LkoRb69FdtqOOYp197Vxw0prS9gnHLrO2f8vngzjzXKDrEwD95imKYoJV+U0HzjwXJAlHMzJml1ndv9mBdfYPPRfoWna/eZKieDEWZ5oLDvOtaC3Hnk7ESfb/A1K3qRpcj5DtAAAAAElFTkSuQmCC';
<img src="#">

Is there any way to draw the corrupted images in the canvas?

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

convert <IMG> to base64 Javascript

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.

Unable to load an Image into Canvas and get base64 encoding for that image

I am trying to generate a PDF from HTML using jspdf plugin. I am stuck with loading Images into PDF. There is a function addImage() in plugin which takes base64 encoding of an image, but converting an image to base64 is not working.
I have used below two ways
//Create canvas, draw image in context and get the data url
imgToDataURL = function (img, outputFormat){
var canvas = document.createElement('canvas');
canvas.width = 20;
canvas.height = 20;
var c = canvas.getContext('2d');
c.height = img.height;
c.width=img.width;
c.drawImage(img, 0, 0);
c.save();
var dataurl = canvas.toDataURL(outputFormat);
return dataurl;
}
var img = new Image();
img.crossOrigin = 'Anonymous';
img.src = "image path"
img.height= 60;
img.width=60;
var dataURL = this.imgToDataURL(img,"image/jpeg");
renderer.pdf.addImage(dataURL, 'png',x+padding,y + this.internal.getLineHeight(),imageWidth,imageHeight);
This is printing wrong dataURL I am getting a white image. If I hard code the base64 code i.e return a hardcoded dataURL then addImage works fine. So the issue is with canvas.toDataURL which is giving me wrong output
this is the 2nd way
convertImgToBase64URL = function (url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
this.convertImgToBase64URL("Image Path",function(base64){
renderer.pdf.addImage(base64, 'PNG', 20, 20,48,48);
})
I have run this inside a javascript and the onload function is not even running I am not sure what is my mistake is.
Please suggest me what mistake I am doing in either way
In the first you missed assigning an onload function to your image. For that reason, the moment you try to create the dataURL, the image might not be loaded yet, ergo, the blank image. You could try changing the last few lines to this:
...
img.width=60;
img.onload = function () {
var dataURL = this.imgToDataURL(img,"image/jpeg");
renderer.pdf.addImage(dataURL, 'png',x+padding,y + this.internal.getLineHeight(),imageWidth,imageHeight);
}
img.src = "image path";
As for the second one, there seems to be a problem with the convertImgToBase64URL() which accepts 3 parameters, but you are passing 2. In you example, outputFormat parameter is undefined.

Save Canvas Image as image in phones file-system using Phonegap?

I am creating an app that allows the user to take the photo. The photo taken is drawn onto a canvas and tagged with the current date and other user specific information once the editing of the image is done on the canvas, I am able to get the image as DataUri but the app requires the image to be saved to the phones local file-system and get back the path of the saved location on the device file-system. The following is the code for the getting the dataURI:
var canvas = $('#myCanvas')[0];
var context = canvas.getContext('2d');
var imageObj = new Image();
var scale = 0.2;
var imgWidth, imgHeight;
imageObj.src = "data:image/jpeg;base64," + imageData;
imageObj.onload = function() {
var mpImg = new MegaPixImage(imageObj);
if (z.globals.deviceType == "iPhone") {
imgWidth = imageObj.width,
imgHeight = imageObj.height;
mpImg.render(document.getElementById('canvas'), { width: imgWidth * scale, height: imgHeight * scale });
} else {
canvas.width = 670;
canvas.height = 500;
context.drawImage(imageObj, 0, 0, 670, 500);
}
var dateTaken = new Date();
context.fillStyle = "#FFFFFF";
context.fillText(toString(dateTaken), 0, 30);
largeImg.src = canvas.toDataURL();
Is there a way using Phonegap to save the dataURI to device file system and get the filepath back.
I tried the canvas2ImagePlugin.js but it saves the image to gallery but does not return the file path.
Any suggestion would be appreciated.
Indeed, canvas2ImagePlugin returns the URI of the saved file.
It's the argument passed to the success callback refered as "msg" in the doc.
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log("Imaged saved to URI : "+msg);
},
function(err){
console.log(err);
},
document.getElementById('myCanvas')
);
It returns something like this :
Imaged saved to URI :/storage/sdcard1/Pictures/c2i_1862014144659.png

Categories

Resources