I have been trying to convert images to base64 string in Javascript. So far with this code which I found on stackoverflow I was able to convert jpeg and png images to their respective base64 strings. But when i try to convert GIF into a base64 it does conversion but the string always have :
data:image/png;base64,............................<string continues>
and when i try to open that, gif image doesn't work.
It should be:
data:image/gif;base64,............................<string continues>
Here's the code:
function convertImgToBase64(url,callback,outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
I am passing the image from a url for example take : http://www.howtogeek.com/wp-content/uploads/2010/10/DANCING_BABY.gif
Please help.
Related
I have an image path which it is stored locally.
For example,
let path = 'C:\Users\Jonnie\Desktop'
How do I get the image by using JavaScript only and convert it to base64?
function imageToBase64(img)
{
var canvas, ctx, dataURL, base64;
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL("image/png");
base64 = dataURL.replace(/^data:image\/png;base64,/, "");
return base64;
}
source
Now you just need to pass your image to there
You can use <canvas> for this.
Create a canvas and load in the image then use toDataURL() to get it in base64
The documentation for <canvas> can be found here
I need the base64-string (not URL) from an existing PNG (photo from a text document).
I use the following function to receive base64-String for my photo. The string, which I get back, is valid but if I test it in a online decoder, I get this image:
imageResult is an image-Element in my DOM. Any hints what is going wrong?
JS
var img = this.imageResult.nativeElement;
var ocrImage = this.getBase64Image(img);
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);base64,/, "");
}
I am currently downloading Google Charts as png with the following code:
var imgUri = my_chart.getImageURI();
var url = window.URL || window.webkitURL;
linkPNG = document.createElement("a");
linkPNG.href = imgUri;
linkPNG.download = title+".png";
link.click();
It works fine. Unfortunately, my users need a jpeg instead of a png, and my usual
var imgURL = my_chart.toDataURL( "image/jpeg" );
doesn't seem to work with Google Charts. How can I download the charts as .jpg instead of .png?
After spending some time looking through the obfuscated source of the visualization library, I have determined it would be easier to just recreate the image from the data URI rather than try to change the original export type. You can load the data URI with an image, draw it on a canvas, and convert it back to a data URI.
var img = new Image();
img.addEventListener('load', function() {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, img.width, img.height);
ctx.drawImage(img, 0, 0);
var link = document.createElement('a');
link.href = canvas.toDataURL('image/jpeg');
link.download = title + '.jpg';
link.click();
});
img.src = my_chart.getImageURI();
Some error handling probably wouldn't be a bad idea either.
I want to use the (pica library) for image resize, but it asks me for a Uint8Array and i only have an Image object with the
src = 'data:image/jpeg;base64,/9j/4AAQ...'
I have no idea how to turn this into a Uint8Array, any thoughts?
Thanks
You will need to apply the image to a canvas and use getImageData().
Here's a simple example of how it can be done:
//create canvas, set base64 test img
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
base64 = 'data:image/jpeg;base64...'; //base64 string
//size canvas
canvas.width = 34,
canvas.height = 34;
//create image, set src to base64 and onload draw to canvas
var image = new Image();
image.onload = (function(canvas, ctx){
return function(){
ctx.drawImage(this, 0, 0);
//now we can finally get a Uint8ClampedArray
var imageData = ctx.getImageData(0, 0, 34, 34);
console.log(imageData.data);
};
})(canvas, ctx);
image.src = base64;
jsfiddle
How to reduce the size of a base64 String for a Jpeg Image?
I have the base64 of a 2000x1000px photo.
How to get the 500x250px base64 compressed photo?
Someone can help me?
put the base64 in an image tag
var img = document.createElement("img");
img.src = "data:image/gif;base64," + yourBase64;
draw it to a scaled canvas
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.scale(0.25, 0.25);
ctx.drawImage(img);
get the base64
var base64 = canvas.toDataURL("image/jpeg");
I didn't actually test this so the resizing part might be wrong,
but it would be something like this.
try searching how to resize images using the canvas tag.