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