| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>In-Browser Greyscale converter</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <script src="https://unpkg.com/canvaskit-wasm@0.6.0/bin/canvaskit.js"></script> |
| <script type="text/javascript" src="/impl/impl.js"></script> |
| <style> |
| canvas { |
| border: 1px dashed black; |
| width: 400px; |
| height: 400px; |
| } |
| #original { |
| display:none; |
| } |
| </style> |
| |
| <body> |
| <input type=file name=file id=file @change=${ele._onFileChange}/> |
| <canvas id=original></canvas> |
| |
| <canvas id=grey></canvas> |
| |
| <script type="text/javascript" charset="utf-8"> |
| loadPolyfill().then(() => { |
| function drawImageAndGreyscaleImg(imgData) { |
| const gCanvas = document.querySelector('#grey'); |
| gCanvas.width = imgData.width; |
| gCanvas.height = imgData.height; |
| const gCtx = gCanvas.getContext('2d'); |
| |
| const pixels = imgData.data; |
| |
| for (let y = 0; y < imgData.height; y++) { |
| for (let x = 0; x < imgData.width; x++) { |
| const offset = 4*(x + imgData.width*y) |
| const r = pixels[offset], g = pixels[offset + 1], b = pixels[offset + 2]; |
| const grey = (r + g + b)/3; |
| pixels[offset ] = grey; |
| pixels[offset + 1] = grey; |
| pixels[offset + 2] = grey; |
| } |
| } |
| |
| const greyData = new ImageData(pixels, imgData.width, imgData.height); |
| |
| gCtx.putImageData(greyData, 0, 0); |
| } |
| document.querySelector('#file').addEventListener('change', (e) => { |
| const blobToLoad = e.target.files[0]; |
| // A browser implementation would be able to directly take the blob |
| const reader = new FileReader(); |
| reader.addEventListener('load', () => { |
| const bytes = reader.result; |
| const imgData = window.createImageData(bytes, { |
| // Specify the destination properties, that is, what format to translate |
| // the pixels in the image to. |
| pixelWidth: "uint8", |
| premul: true, |
| colorSpace: "srgb", |
| }); |
| requestAnimationFrame(() => { |
| drawImageAndGreyscaleImg(imgData); |
| }); |
| }); |
| reader.addEventListener('error', () => { |
| console.error('Failed to load '+ blobToLoad.name); |
| }); |
| reader.readAsArrayBuffer(blobToLoad); |
| }); |
| }); |
| |
| </script> |
| <body> |
| </html> |
