Convert ImageData to blob in JS?

Question

I have an ImageData object but Tesseract.js only takes blob objects. How can I convert the ImageData to a blob as performantly as possible?

Welcome to SO! This post appears to be [off-topic](http://stackoverflow.com/help/on-topic) as per *Questions that lack sufficient information to diagnose the problem.* Please edit your post accordingly to add sufficient detail so that people may help you. — Adhitya, Dec 12 '20 at 10:29

score 2 · Accepted Answer · edited Sep 29 '21 at 13:01

Referring here, the code should look like -

const ImageDataToBlob = function(imageData){
  let w = imageData.width;
  let h = imageData.height;
  let canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  let ctx = canvas.getContext("2d");
  ctx.putImageData(imageData, 0, 0);        // synchronous

  return new Promise((resolve) => {
        canvas.toBlob(resolve); // implied image/png format
  });
}

score 0 · Answer 2 · answered Dec 12 '20 at 17:39

Tesseract.js also takes some other types - https://github.com/naptha/tesseract.js/blob/master/docs/image-format.md - and I have found some code on the internet to convert:

function imgDataToImage(imagedata) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = imagedata.width;
    canvas.height = imagedata.height;
    ctx.putImageData(imagedata, 0, 0);

    var image = new Image();
    image.src = canvas.toDataURL();
    return image;
}

Convert ImageData to blob in JS?

2 Answers2