1cb93a386Sopenharmony_ci<!DOCTYPE html> 2cb93a386Sopenharmony_ci<html> 3cb93a386Sopenharmony_ci<head> 4cb93a386Sopenharmony_ci <title>In-Browser Greyscale converter</title> 5cb93a386Sopenharmony_ci <meta charset="utf-8" /> 6cb93a386Sopenharmony_ci <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7cb93a386Sopenharmony_ci <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8cb93a386Sopenharmony_ci <script src="https://unpkg.com/canvaskit-wasm@0.6.0/bin/canvaskit.js"></script> 9cb93a386Sopenharmony_ci <script type="text/javascript" src="/impl/impl.js"></script> 10cb93a386Sopenharmony_ci <style> 11cb93a386Sopenharmony_ci canvas { 12cb93a386Sopenharmony_ci border: 1px dashed black; 13cb93a386Sopenharmony_ci width: 400px; 14cb93a386Sopenharmony_ci height: 400px; 15cb93a386Sopenharmony_ci } 16cb93a386Sopenharmony_ci #original { 17cb93a386Sopenharmony_ci display:none; 18cb93a386Sopenharmony_ci } 19cb93a386Sopenharmony_ci </style> 20cb93a386Sopenharmony_ci 21cb93a386Sopenharmony_ci<body> 22cb93a386Sopenharmony_ci <input type=file name=file id=file @change=${ele._onFileChange}/> 23cb93a386Sopenharmony_ci <canvas id=original></canvas> 24cb93a386Sopenharmony_ci 25cb93a386Sopenharmony_ci <canvas id=grey></canvas> 26cb93a386Sopenharmony_ci 27cb93a386Sopenharmony_ci <script type="text/javascript" charset="utf-8"> 28cb93a386Sopenharmony_ci loadPolyfill().then(() => { 29cb93a386Sopenharmony_ci function drawImageAndGreyscaleImg(imgData) { 30cb93a386Sopenharmony_ci const gCanvas = document.querySelector('#grey'); 31cb93a386Sopenharmony_ci gCanvas.width = imgData.width; 32cb93a386Sopenharmony_ci gCanvas.height = imgData.height; 33cb93a386Sopenharmony_ci const gCtx = gCanvas.getContext('2d'); 34cb93a386Sopenharmony_ci 35cb93a386Sopenharmony_ci const pixels = imgData.data; 36cb93a386Sopenharmony_ci 37cb93a386Sopenharmony_ci for (let y = 0; y < imgData.height; y++) { 38cb93a386Sopenharmony_ci for (let x = 0; x < imgData.width; x++) { 39cb93a386Sopenharmony_ci const offset = 4*(x + imgData.width*y) 40cb93a386Sopenharmony_ci const r = pixels[offset], g = pixels[offset + 1], b = pixels[offset + 2]; 41cb93a386Sopenharmony_ci const grey = (r + g + b)/3; 42cb93a386Sopenharmony_ci pixels[offset ] = grey; 43cb93a386Sopenharmony_ci pixels[offset + 1] = grey; 44cb93a386Sopenharmony_ci pixels[offset + 2] = grey; 45cb93a386Sopenharmony_ci } 46cb93a386Sopenharmony_ci } 47cb93a386Sopenharmony_ci 48cb93a386Sopenharmony_ci const greyData = new ImageData(pixels, imgData.width, imgData.height); 49cb93a386Sopenharmony_ci 50cb93a386Sopenharmony_ci gCtx.putImageData(greyData, 0, 0); 51cb93a386Sopenharmony_ci } 52cb93a386Sopenharmony_ci document.querySelector('#file').addEventListener('change', (e) => { 53cb93a386Sopenharmony_ci const blobToLoad = e.target.files[0]; 54cb93a386Sopenharmony_ci // A browser implementation would be able to directly take the blob 55cb93a386Sopenharmony_ci const reader = new FileReader(); 56cb93a386Sopenharmony_ci reader.addEventListener('load', () => { 57cb93a386Sopenharmony_ci const bytes = reader.result; 58cb93a386Sopenharmony_ci const imgData = window.createImageData(bytes, { 59cb93a386Sopenharmony_ci // Specify the destination properties, that is, what format to translate 60cb93a386Sopenharmony_ci // the pixels in the image to. 61cb93a386Sopenharmony_ci pixelWidth: "uint8", 62cb93a386Sopenharmony_ci premul: true, 63cb93a386Sopenharmony_ci colorSpace: "srgb", 64cb93a386Sopenharmony_ci }); 65cb93a386Sopenharmony_ci requestAnimationFrame(() => { 66cb93a386Sopenharmony_ci drawImageAndGreyscaleImg(imgData); 67cb93a386Sopenharmony_ci }); 68cb93a386Sopenharmony_ci }); 69cb93a386Sopenharmony_ci reader.addEventListener('error', () => { 70cb93a386Sopenharmony_ci console.error('Failed to load '+ blobToLoad.name); 71cb93a386Sopenharmony_ci }); 72cb93a386Sopenharmony_ci reader.readAsArrayBuffer(blobToLoad); 73cb93a386Sopenharmony_ci }); 74cb93a386Sopenharmony_ci }); 75cb93a386Sopenharmony_ci 76cb93a386Sopenharmony_ci </script> 77cb93a386Sopenharmony_ci<body> 78cb93a386Sopenharmony_ci</html> 79