We Keep Coding

Convert image into base64 string using javascript img not loading on the first time

I tried to convert the image to base64 string using javascript/angularjs following the code showed on this stacko page, you can also check the code in detail here.
function toDataURL(src, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}
toDataURL(
'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
function(dataUrl) {
console.log('RESULT:', dataUrl)
}
)
I call this function in the init inside the controller but when i load the page the image doesn't load the first time, but if i load the page again the image does load. I also made a button to call the function again, and as expected the image loads just fine after i load the page and press the button.
Debugging the code i found that the image only loads if it gets to the last if statement which, as by the detailed code, is flushing the cache. But since it's trying by the second time wouldn't this be the normal approach?
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
After getting here it goes on to img.onload and loads the image again, this time the image loads just fine.
What am i missing? Do i need to do something to wait the image to load? Can i do something to make it load later? Or is it something else?

Turns out i wasn't addressing the fact that ImgPreview from ui-cropper can be used, therefore there wasn't any need to convert the image. I only made a $scope in the view to get that ImgPreview and send that to the database. Sadly i can't provide any code.

How do I get image dimensions from a Base64 Image in JavaScript?

I would like to validate an image on the client-side, checking the dimensions against predefined criteria.

This should help you understand how this can be done.
var img = new Image();
var base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJ1BMVEUAAACAgIDo6Ojq6urt7e3v7+/x8fH09PT29vb4+Pj6+vr9/f3///8nK8D7AAAAAXRSTlMAQObYZgAAAFZJREFUCB0FwcERAUEUBcCe8d1lIJSVyYZCKPIRidObi61VitENoLUTSGsPeC0lsOmSZB1K2OfQ5ZrbHLq8n9ahxP2Yjy4XS4YSh/gqcY6fEphKAAAA/p/UJlqT/uIiAAAAAElFTkSuQmCC';
img.onload = function(){
document.getElementById('imgData').innerHTML = "Widht: "+img.width+" Height:"+img.height;
};
img.src = base64Image;
<div id='imgData'></div>

How to download an image object from webgl/javascript

I have a directory with 100 images. I need a copy of them in various folders along with other information that I download from webgl. Hence I want to upload them onto the browser and download them again (hope that isn't stupid)
Here is my code:
var imagefile = model.features[cIndex].imageName.substring(model.features[cIndex].imageName.lastIndexOf('/')+1);
var image = new Image();
image.src = model.imageDirectory + imagefile;
image.onload = function() {
console.info("Read \""+image.src + "\"...Done");
}
image.onerror = function() {
var message = "Unable to open \"" + image.src + "\".";
console.error(message);
alert(message);
}
var data = image.src;
zip.file('image_RH_Original' + cIndex +'.png', data , {base64: true});
Is this wrong? How to I do something similar to "toDataURL" for the image object?

toDataURL is a method of canvas, and webgl draws to a canvas. So just call canvas.toDataURL(). Probably need to set preserveDrawingBuffer to true as well.

Opening base64 image from html2canvas

I'm trying to actually view the string image that html2canvas is rendering. I have a web page that opens from a hyperlink. I want in the end to use the Image button to take a screen shot of the web page. I am getting the base64 string but how do I view the string image?
$(document).ready(function(){
html2canvas(document.body,{
onrendered: function (canvas){
var data = canvas.toDataURL();
alert(data);
},
width:300,
height:300
});

You do that by appending something like data:image/png;base64, to the base64 string, and using it as the source for an image tag that is inserted somewhere :
html2canvas(document.body,{
onrendered: function (canvas){
var data = canvas.toDataURL();
var img = document.createElement('img');
img.setAttribute('download','myImage.png');
img.src = 'data:image/png;base64,' + data;
document.body.appendChild(img);
},
width:300,
height:300
});

Using the Answer from #adeneo, instead of:
img.src = 'data:image/png;base64,' + data;
try this:
img.src = data;
since the data image prefix is already inside the data variable.

canvas.toDataURL() not working properly except mozilla firefox

I have developed a coupon generator module in the site I create a coupon in the html format and fill that html value in canvas by using JavaScript function which is
function checkcanvas(id) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='437' height='262'>"
+ "<foreignObject width='100%' height='100%'>"
+ "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>"
+ $("#coupon_td").html()
+ "</div>"
+ "</foreignObject>"
+ "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
if(id == 2) {
document.getElementById('base_64_img').value = canvas.toDataURL();
}
}
base_64_img is just a hidden element so I can post the data into my php code and create a image using base64 code.
The biggest issue I am facing that this code perfectly worked in Mozilla Firefox almost every version but not working in Google chrome.

In your code you are generating an "SVG IMAGE" and trying to convert into toDataURL().
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
This is the problem, from this URL toDataURL :
If the type requested is not image/png, and the returned value starts
with data:image/png, then the requested type is not supported.
In this fiddlecode if you see the printed output , "data:image/png;base64". its supposed to be "data:image/svg;base64".
Instead of creating svg image, use canvas element and javascript to draw the related banner image and if you take the output then try copy & paste in your browser. ( it may work ).
Check this js plugin called SVG.toDataURL
Hope this helps.