We Keep Coding

How to convert a locally stored image to base64?

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

Get base64 string from existing png not working

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,/, "");
}

Blank image after resizing in canvas

I'm trying to resize an image using the canvas method. I am then getting the ArrayBuffer and using that to upload the new image. Here's my resize method.
function resizeImage(img) {
var perferedWidth = 160;
var ratio = perferedWidth / img.width;
var $canvas = $("#canvasTest");
var canvas = $("#canvasTest")[0];
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0,0,canvas.width, canvas.height);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data.buffer;
return imageData;
}
The problem is once the image gets uploaded, it's just a blank image. I am not doing something correct as the imageData is not giving me a valid buffer. I know it's not valid because when I convert the imageData to a base64 string, it's not a valid base64 encoded image (image doesn't show up when I set its src to it).
I also know that the drawImage method is working, as I have temporarily created a canvas in the DOM and it is correctly drawing the image to that canvas.
What am I doing wrong? Thanks!

convert image src data: into Uint8Array

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

Saving GIF into base64 string using Canvas HTML5 javascript

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.