1758029-1.html (1391B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <style> 5 body { background: gray; } 6 canvas { border: 2px solid black;} 7 </style> 8 9 <img id="img" 10 onload="go()" 11 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg=="> 12 <canvas id="canvas"></canvas> 13 <script> 14 const ctx = canvas.getContext("2d", { desynchronized: true }); 15 const SVG_FILTER = ` 16 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 17 <filter id="posterize"> 18 <feComponentTransfer> 19 <feFuncR type="discrete" tableValues="0,1" /> 20 <feFuncG type="discrete" tableValues="0,1" /> 21 <feFuncB type="discrete" tableValues="0,1" /> 22 <feFuncA type="discrete" tableValues="0,1" /> 23 </feComponentTransfer> 24 </filter> 25 </svg>`; 26 27 const FILTER1 = `url('data:image/svg+xml;utf8,${SVG_FILTER.replace(/\n/g, "") 28 .replace(/\s+/g, " ") 29 .trim()}#posterize') grayscale(50%) brightness(50%)`; 30 function go() { 31 canvas.width = img.naturalWidth; 32 canvas.height = img.naturalHeight; 33 34 ctx.imageSmoothingEnabled = true; 35 ctx.clearRect(0, 0, canvas.width, canvas.height); 36 ctx.filter = FILTER1; 37 ctx.drawImage(img, 0, 0); 38 setTimeout(() => { document.documentElement.removeAttribute("class")}, 0); 39 } 40 </script>