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

File Object to ImageData Conversion not producing correct pixels (JavaScript)

I am trying trying to convert an uploaded file object (jpg, png) into an ImageData in JavaScript. This is how I do it so far:
var fileReaderObj = new FileReader();
fileReaderObj.onload = function (ev) {
var fileDataURL = ev.target.result;
var img = new Image();
img.onload = function(){
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0, img.width, img.height);
var imgData = context.getImageData(0, 0, img.width, img.height);
console.log("IMGDATA PIXELS:" + imgData.data);
}
img.src = fileDataURL;
};
fileReaderObj.readAsDataURL(uploadedFile);
After I do this, I observe my console output to see if imgData.data (which is an array of image pixel values) to see if the pixels are correct. However, after observing the pixels, I've realized that about the first half of the pixels are correct, while the second half pixels are all 0. This is very strange, and I was wondering what I am doing wrong. Any help would be greatly appreciated. Thank you.

jspdf to addImage : error supplied data is not a JPEG

I am trying to add an image to my pdf:
var image = '../images/example.jpg';
doc.addImage(image, 'JPEG', 0, 0, 700, 145);
and I get this error:
Error: Supplied data is not a JPEG
however, when I add a base64 image:
var image = 'data:image/jpeg;base64,/9j/6GADS...'
doc.addImage(image, 'JPEG', 0, 0, 700, 145);
it works fine!
why is the first version not working?
I am trying this:
var image = $base64.encode('../images/example.jpg')
the same error above again!
what is happening here? what is the solution?

You can use this.
function toDataUrl(src, callback, outputFormat) {
// Create an Image object
var img = new Image();
// Add CORS approval to prevent a tainted canvas
img.crossOrigin = 'Anonymous';
img.onload = function() {
// Create an html canvas element
var canvas = document.createElement('CANVAS');
// Create a 2d context
var ctx = canvas.getContext('2d');
var dataURL;
// Resize the canavas to the image dimensions
canvas.height = this.height;
canvas.width = this.width;
// Draw the image to a canvas
ctx.drawImage(this, 0, 0);
// Convert the canvas to a data url
dataURL = canvas.toDataURL(outputFormat);
// Return the data url via callback
callback(dataURL);
// Mark the canvas to be ready for garbage
// collection
canvas = null;
};
// Load the image
img.src = src;
}

fill the image within the canvas

I have a base64 image string, I have created a canvas and put the base64 with the image and have given canvas height as 481 and width as 650, when I tried to display the image in html, image is coming but it is not completely filling the canvas,
Can anyone please tell me some solution to fill the image within the entire canvas, no matter what the quality of the picture.
My code is as given below
JSFiddle
var base64 = "data:image/jpeg;base64,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";
var canvas = document.createElement('canvas');
canvas.width = 650;
canvas.height = 481;
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0);
};
image.src = base64;
$('#showImage').html(canvas);

Change your onload function body to
ctx.drawImage(image, 0, 0, 650, 481);

Set the size of the canvas using natural width/height after the image has loaded:
var base64 = "data:image/jpeg;base64,/9j/4AAQSkZJ.....";
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function () {
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
};
image.src = base64;
$('#showImage').html(canvas);

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