JAVASCRIPT

convert image object to blob javascript

fetch("image source").then(response => {
  response.blob();
}).then(blob => {
  // 'blob' is the image in blob form
});

javascript image to blob

// take any image
let img = document.querySelector('img');

// make <canvas> of the same size
let canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;

let context = canvas.getContext('2d');

// copy image to it (this method allows to cut image)
context.drawImage(img, 0, 0);
// we can context.rotate(), and do many other things on canvas

// toBlob is async operation, callback is called when done
canvas.toBlob(function(blob) {
  // blob ready, download it
  let link = document.createElement('a');
  link.download = 'example.png';

  link.href = URL.createObjectURL(blob);
  link.click();

  // delete the internal blob reference, to let the browser clear memory from it
  URL.revokeObjectURL(link.href);
}, 'image/png');

js set image as blob

// set image to browser memory
const blob=await fetch('file_path').then(res=>res.blob());
// create url object
const urlCreator = window.URL || window.webkitURL;
// render image
document.querySelector('selector').setAttribute('src', urlCreator.createObjectURL(blob));