JSFiddle - React, Tailwind, and code Playground

by darul75

HTML

<div>SOURCE IMG <img src="https://fiddle.jshell.net/favicon.png" /></div>
<div>TARGET IMG (DATA URI) <img id="targetImg" /></div>
<div>TARGET CANVAS (DATA URI) <canvas id="targetCanvas" width="35" height="30" /></div>
<div>SOURCE IMG FOR SECURITY ERROR <img id="cors-img" src="https://jsfiddle.net/favicon.png" /></div>

JavaScript

var targetImg = document.getElementById("targetImg");
var corsImg = document.getElementById("cors-img");
var targetCanvas = document.getElementById("targetCanvas");
var targetCanvasCtx = targetCanvas.getContext('2d');

// use js api to build an image
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://fiddle.jshell.net/favicon.png';

img.onload = function() {
  // use a canvas to get data URI for image
  var workerCanvas = document.createElement('canvas'),
  workerCtx = workerCanvas.getContext('2d');

  // init
  workerCanvas.width = this.width;
  workerCanvas.height = this.height;

  // fill with image  
  workerCtx.drawImage(this, 0, 0);
  
  // get data URI for this image
  var imgDataURI = workerCanvas.toDataURL();
  console.log(imgDataURI);
  
  // assign it to target image tag  
  targetImg.src = imgDataURI;
  
  // assign it to target canvas tag  
  targetCanvasCtx.width = this.width;
  targetCanvasCtx.height = this.height;
  
  var tmpImg = new Image();
  tmpImg.src = imgDataURI;
  
  targetCanvasCtx.drawImage(tmpImg, 0, 0);
  
};    
img.onerror = function(e) { };

// another example 

var corsWorkerCanvas = document.createElement('canvas'),
  corsWorkerCtx = corsWorkerCanvas.getContext('2d');
  
// init
corsWorkerCanvas.width = corsImg.width;
corsWorkerCanvas.height = corsImg.height;

// fill with image  
corsWorkerCtx.drawImage(corsImg, 0, 0);

// get data URI for this image
var corsImgDataURI = corsWorkerCanvas.toDataURL();