How to convert image from base64 to array in javascript-CodePudding

I have got a image in my javascript code which is in base64 format as given below:

Img=image/jpeg;base64,/9j/4AAQSK.......

Now I want to convert this image into array using javascript.

CodePudding user response：

Do you possibly mean a ImageData? it's a 1d array where each 4 consecutive numbers (bytes?) represent (r,g,b,a) with values 0..255

var str = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1 9kLp vbbpoDh 6TklxBeAi9TL0taeWpdmZzQDry0AcO jQ12RyohqqoYoo8RDwJrU qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl TvuiRW1m3n0eDl0vRPcEysqdXn jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R h6rYSUb3ekokRY6f/YukArN979jcW V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2 D3P 4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ gqjk8VWFYmHrwBzW/n uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t 2nNu5sxxpDFNx huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw /wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="


var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');

var image = new Image()
image.onload = function() {
  ctx.drawImage(image, 0, 0);
  var imageData = ctx.getImageData(0, 0, image.width, image.height);
  console.log(imageData)
}
image.src = str;
document.body.appendChild(canvas)

CodePudding user response：

Try this:

function base64ToUint8Array(base64) {
    const binary = atob(base64);
    const len = binary.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i  )
        bytes[i] = binary.charCodeAt(i);
    return bytes;
}

base64ToUint8Array(YourBase64String)

Explanation

Well it's pretty straightforward,

First we decode the base64 string (atob),
then we create new array of 8-bit unsigned integers with the same length as the decoded string. (Uint8Array)
After that we iterate the string and populate the array with Unicode value of each character in the string.

Example:

function base64ToUint8Array(base64) {
    const binary = atob(base64);
    const len = binary.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i  )
        bytes[i] = binary.charCodeAt(i);
    return bytes;
}

const image = `Img=image/jpeg;base64,T25seUV4YW1wbGU=`
const base64 = image.split('base64,')[1]
console.log(base64ToUint8Array(base64))

Reference: Convert base64 string to ArrayBuffer

Remarks

If you want to return an ArrayBuffer instead of a Uint8Array, you should return bytes.buffer instead of bytes