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 <style> 9cb93a386Sopenharmony_ci canvas { 10cb93a386Sopenharmony_ci border: 1px dashed black; 11cb93a386Sopenharmony_ci width: 400px; 12cb93a386Sopenharmony_ci height: 400px; 13cb93a386Sopenharmony_ci } 14cb93a386Sopenharmony_ci #original { 15cb93a386Sopenharmony_ci display:none; 16cb93a386Sopenharmony_ci } 17cb93a386Sopenharmony_ci </style> 18cb93a386Sopenharmony_ci 19cb93a386Sopenharmony_ci<body> 20cb93a386Sopenharmony_ci <input type=file name=file id=file @change=${ele._onFileChange}/> 21cb93a386Sopenharmony_ci <canvas id=original></canvas> 22cb93a386Sopenharmony_ci 23cb93a386Sopenharmony_ci <canvas id=grey></canvas> 24cb93a386Sopenharmony_ci 25cb93a386Sopenharmony_ci <script type="text/javascript" charset="utf-8"> 26cb93a386Sopenharmony_ci function drawImageAndGreyscaleImg(img) { 27cb93a386Sopenharmony_ci const oCanvas = document.querySelector('#original'); 28cb93a386Sopenharmony_ci oCanvas.width = img.width; 29cb93a386Sopenharmony_ci oCanvas.height = img.height; 30cb93a386Sopenharmony_ci const oCtx = oCanvas.getContext('2d'); 31cb93a386Sopenharmony_ci 32cb93a386Sopenharmony_ci oCtx.drawImage(img, 0, 0); 33cb93a386Sopenharmony_ci 34cb93a386Sopenharmony_ci const pixels = oCtx.getImageData(0, 0, img.width, img.height).data; 35cb93a386Sopenharmony_ci 36cb93a386Sopenharmony_ci const gCanvas = document.querySelector('#grey'); 37cb93a386Sopenharmony_ci gCanvas.width = img.width; 38cb93a386Sopenharmony_ci gCanvas.height = img.height; 39cb93a386Sopenharmony_ci const gCtx = gCanvas.getContext('2d'); 40cb93a386Sopenharmony_ci 41cb93a386Sopenharmony_ci for (let y = 0; y < img.height; y++) { 42cb93a386Sopenharmony_ci for (let x = 0; x < img.width; x++) { 43cb93a386Sopenharmony_ci const offset = 4*(x + img.width*y) 44cb93a386Sopenharmony_ci const r = pixels[offset], g = pixels[offset + 1], 45cb93a386Sopenharmony_ci b = pixels[offset + 2], a = pixels[offset + 3]; 46cb93a386Sopenharmony_ci const grey = a*(r + g + b)/3; 47cb93a386Sopenharmony_ci pixels[offset ] = grey; 48cb93a386Sopenharmony_ci pixels[offset + 1] = grey; 49cb93a386Sopenharmony_ci pixels[offset + 2] = grey; 50cb93a386Sopenharmony_ci } 51cb93a386Sopenharmony_ci } 52cb93a386Sopenharmony_ci 53cb93a386Sopenharmony_ci const greyData = new ImageData(pixels, img.width, img.height); 54cb93a386Sopenharmony_ci 55cb93a386Sopenharmony_ci gCtx.putImageData(greyData, 0, 0); 56cb93a386Sopenharmony_ci } 57cb93a386Sopenharmony_ci document.querySelector('#file').addEventListener('change', (e) => { 58cb93a386Sopenharmony_ci const toLoad = e.target.files[0]; 59cb93a386Sopenharmony_ci const reader = new FileReader(); 60cb93a386Sopenharmony_ci reader.addEventListener('load', () => { 61cb93a386Sopenharmony_ci const b64dataURL = reader.result; 62cb93a386Sopenharmony_ci 63cb93a386Sopenharmony_ci const img = new Image(); 64cb93a386Sopenharmony_ci img.src = b64dataURL; 65cb93a386Sopenharmony_ci requestAnimationFrame( () => { 66cb93a386Sopenharmony_ci drawImageAndGreyscaleImg(img); 67cb93a386Sopenharmony_ci }); 68cb93a386Sopenharmony_ci 69cb93a386Sopenharmony_ci }); 70cb93a386Sopenharmony_ci reader.addEventListener('error', () => { 71cb93a386Sopenharmony_ci console.error('Failed to load '+ toLoad.name); 72cb93a386Sopenharmony_ci }); 73cb93a386Sopenharmony_ci reader.readAsDataURL(toLoad); 74cb93a386Sopenharmony_ci }); 75cb93a386Sopenharmony_ci </script> 76cb93a386Sopenharmony_ci<body> 77cb93a386Sopenharmony_ci</html> 78