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