pixelated.min.js

/**
 *  Pixelated.js
 * 
 *  Automatically scale img tags using nearest-neighbor.
 *  Just add the "pixelated" attribute to your img.
 * 
 *  @author Wolfy
 *  @link https://github.com/lupine-dev/pixelated-polyfill
 *  @license http://opensource.org/licenses/MIT MIT License
 *  @copyright 2020 Wolfy
 */
!function(){class t{constructor(t,i){this.img=t,this.algo=i,this.originalImg=t.cloneNode(!0),t.complete?this.init():t.onload=(()=>{t.onload=null,this.init()})}init(){const t=()=>{"xbr"!==this.algo&&(this.img.style.imageRendering="pixelated"),CSS.supports("image-rendering","pixelated")&&"xbr"!==this.algo||(this.img.crossOrigin="anonymous",this.img.getAttribute("width")||this.img.getAttribute("height")||(this.img.width=this.img.naturalWidth,this.img.height=this.img.naturalHeight),this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.updateCanvas(),new ResizeObserver(this.updateCanvas.bind(this)).observe(this.img))};"xbr"===this.algo?XbrWasm.ready.then(()=>{this.xbr=new XbrWasm(this.img,4),t()}):t()}async updateCanvas(){if(!this.canvasDebounceTimeout){const t=window.devicePixelRatio||1,i=this.img.clientWidth*t,e=this.img.clientHeight*t;this.canvas.width=i,this.canvas.height=e,this.ctx.save(),this.ctx.imageSmoothingEnabled=!1,"xbr"===this.algo?(await this.xbr.draw(),this.ctx.drawImage(this.xbr.destCanvas,0,0,this.canvas.width,this.canvas.height)):this.ctx.drawImage(this.originalImg,0,0,this.canvas.width,this.canvas.height),this.ctx.restore(),this.img.src=this.canvas.toDataURL(),this.canvasDebounceTimeout=setTimeout(()=>{this.canvasDebounceTimeout=null},500),clearTimeout(this.canvasFinalTimeout),this.canvasFinalTimeout=setTimeout(this.updateCanvas.bind(this),500)}}}document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll("img[pixelated]").forEach(i=>{i instanceof HTMLImageElement&&function(i){i.style.imageRendering="pixelated",new t(i,i.getAttribute("pixelated-algo"))}(i)})})}();