CODEWITHSUNDEEP
javascriptblobdata-conversiontesseract.jsimagedata
AlexAndHisScripts
AlexAndHisScripts

Reputation: 13

Convert ImageData to blob in JS?

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?

Upvotes: 1

Views: 7183

Answers (2)

Nikhil Patil
Nikhil Patil

Reputation: 2540

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
  });
}

Upvotes: 2

AlexAndHisScripts
AlexAndHisScripts

Reputation: 13

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;
}

Upvotes: 0

Related Questions