JSFiddle - React, Tailwind, and code Playground

by Sillvva

JavaScript

// In this example, if you make an ajax request to the following website
var myUrl = 'http://media-waterdeep.cursecdn.com/avatars/thumbnails/4551/778/150/150/636725686141238893.png';
//  But if you make it from a browser, then it will work without problem ...

// However to make it work, we are going to use the cors-anywhere free service to bypass this
var proxy = 'https://cors-anywhere.herokuapp.com/';

var img = new Image;
var c = document.createElement("canvas");
var ctx = c.getContext("2d");

img.onload = function() {
  c.width = this.naturalWidth;     // update canvas size to match image
  c.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0);       // draw in image
  c.toBlob(function(blob) {        // get content as JPEG blob
    // here the image is a blob
  }, "image/jpeg", 0.75);
};
img.crossOrigin = "";              // if from different origin
img.src = proxy+myUrl;
document.body.append(c);