log-imagedata-from-web-worker.js

/*
 * This code helps with logging image processed in the worker.
 * 
 * Simple visual explanation for image transformation.
 */

// WORKER:
postMessage({
  imageData,
});


// WINDOW:
worker.onmessage = (e) => {
  if (e.data.imageData) {
    return logImageData(e.data.imageData, e.data.text);
  }
};

function logImageData(imageData, text) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = imageData.width;
  canvas.height = imageData.height;
  ctx.putImageData(imageData, 0, 0);

  // Create a new `Image` instance
  const image = new Image();

  image.onload = function() {
    console.log(
      '%c+',
      `font-size: 0;
padding: ${Math.ceil(this.height / 2)}px ${Math.ceil(this.width / 2)}px;
line-height: 0;
background: url(${this.src.replace(/\(/g, '%28').replace(/\)/g, '%29')});
background-size: ${this.width}px ${this.height}px;
color: transparent;
background-repeat: no-repeat;`
    );
  };

  image.src = canvas.toDataURL();
}