2a:null 2b:["$","title",null,{"children":"Images | AbserAri | Observable"}] 30:T6ff,viewof A = form(html` `)31:T5b5,rendorTrans = async () => { const img = new Image(); img.src = status.imagePath; // console.log(`${img.naturalWidth} - ${img.naturalHeight}`); const canvas = DOM.canvas(img.naturalWidth, img.naturalHeight); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight); // console.log(width, (width / img.naturalWidth) * img.naturalHeight); var imageData = ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight); console.log(`计算 ${imageData.data.length / 4} * 4 与 4 * 4 矩阵`); // Use gpu or not if (!navigator.gpu) { let t0 = window.performance.now(); console.log( 'WebGPU is not supported. Enable chrome://flags/#enable-unsafe-webgpu flag.' ); // trans rgba, when ispng is false, try 3*3 do not change alpha var lineT = new matrix([ [A.a11, A.a12, A.a13, A.a14], [A.a21, A.a22, A.a23, A.a24], [A.a31, A.a32, A.a33, A.a34], [A.a41, A.a42, A.a43, A.a44] ]); rgbTrans(imageData, lineT); console.log( `不使用 GPU 加速：执行了 ${window.performance.now() - t0} 毫秒.` ); } else { // console.log('Now is using WebGPU'); // let t0 = window.performance.now(); // await rgbTransByGPU(imageData); // console.log( // `使用 GPU 加速：执行了 ${window.performance.now() - t0} 毫秒.` // ); } ctx.putImageData(imageData, 0, 0); return canvas; }32:[] 2e:{"id":"a7585b1bb36b2735","slug":"images","title":"Images","thumbnail":"dacab8343062322aa3a165a30f2083cca71aea9ab38c1748a2a1e347c60d2927","access_level":"public","create_time":"$D2020-01-01T13:31:22.887Z","update_time":"$D2020-02-11T09:46:48.714Z","view_time":null,"first_public_time":"$D2020-01-01T13:47:23.764Z","fork":{"id":"f8f19f8deb7c30db","slug":"images","title":"Images","owner":{"id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8c968b856895152e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":"starter_2024"},"version":918,"publish_version":918,"role":null,"authored":false,"authors":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null}],"members":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"9d66bfdd3bca4b7d","slug":"cv","title":"CV","owner":{"id":"8c968b856895152e","login":"yhyddr","name":"AbserAri"}},"type":"notebook","body":{"title":"Images","cells":[{"id":0,"value":"md`# Images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`\n## Canvas\n### Show\n- [Using Images](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)\n- [drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"md`\n## Kind\nAfter Upload your picture, please choose your image kind in case we know use RGB channel or RGBA channel.\n\n## Matrix\nThen you could configure the value of matrix which trans all the pixel's channel.\n\nThe example is eyes matrix which means that we default do nothing about your picture.\n\nthen you click start rendor to see what changed.\n\n**NOTICE: It may take 20 seconds to solve 1 mb picture.Try configure matrix fisrt before click start**\n\n**Update: Use GPU to speed up [Visit this link](https://observablehq.com/@yhyddr/images-by-gpu)**\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"html` No Image

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":664,"value":"{\n if (rendorOn) {\n return await rendorTrans();\n }\n return \"don't rendor realtime\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":717,"value":"start = {\n const button = html``;\n button.onclick = () => {\n if (rendorOn) {\n mutable rendorOn = 0;\n } else {\n mutable rendorOn = 1;\n }\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":842,"value":"mutable rendorOn = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"status = {\n return {\n imagePath: undefined\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"{\n const input = document.getElementById('chooseImage');\n const image = document.getElementById('origin');\n\n input.addEventListener(\n 'change',\n e => {\n status.imagePath = URL.createObjectURL(e.target.files[0]);\n image.src = status.imagePath;\n },\n false\n );\n\n image.onload = () => {\n showImage();\n };\n return 'this cell’s code is using to load your image';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"showImage = () => {\n const img = new Image();\n img.src = status.imagePath;\n\n // console.log(`${img.naturalWidth} - ${img.naturalHeight}`);\n const canvas = DOM.canvas(\n width,\n (width / img.naturalWidth) * img.naturalHeight\n );\n // console.log(`new ${width} - ${(width / img.naturalWidth) * img.naturalHeight}`);\n const ctx = canvas.getContext('2d');\n\n // draw image use imgdata\n ctx.drawImage(\n img,\n 0,\n 0,\n width,\n (width / img.naturalWidth) * img.naturalHeight\n );\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":765,"value":"md`rgbTrans use matrix multiplie to convert rgb`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"rgbTrans = (\n img,\n lineTransMatrix,\n\n { fx } = {\n fx: mx => {\n return mx;\n }\n }\n) => {\n // convert img.data to Matrix to compute\n // console.log(img.data.length / 4);\n\n var y = [];\n for (let i = 0; i < img.data.length; i += 4) {\n let x = [];\n for (let j = 0; j < 4; ++j) {\n x.push(img.data[i + j]);\n }\n y.push(x);\n }\n var m = new matrix(y);\n // make lineTrans\n var x = fx(m.mmul(lineTransMatrix));\n // convert Matrix to linear Uint8Array\n var z = [];\n for (let i = 0; i < x.data.length; ++i) {\n for (let j = 0; j < 4; ++j) {\n img.data[4 * i + j] = x.data[i][j];\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":898,"value":"md`[Find How to use GPU in this notebook](https://observablehq.com/@yhyddr/images-by-gpu)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":881,"value":"rgbTransByGPU = async img => {\n // construct first martix\n var image = new Float32Array(2 + img.data.length);\n image[0] = img.data.length / 4;\n image[1] = 4;\n for (var i = 0; i < img.data.length; i++) {\n image[i + 2] = img.data[i];\n }\n\n // construct second matrix which use to trans\n var lineT = new Float32Array([\n 4,\n 4,\n A.a11,\n A.a12,\n A.a13,\n A.a14,\n A.a21,\n A.a22,\n A.a23,\n A.a24,\n A.a31,\n A.a32,\n A.a33,\n A.a34,\n A.a41,\n A.a42,\n A.a43,\n A.a44\n ]);\n\n // console.log(img);\n // use gpu compute the result\n const result = await gpuMatrixCompute(image, lineT);\n for (var i = 0; i < result.length; i++) {\n img.data[i] = result[i + 2];\n }\n // console.log(img);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"Matrix = require('ml-matrix')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"import { button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":726,"value":"import { gpuMatrixCompute } from '@yhyddr/gpu-matrix-compute'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"matrix = Matrix.Matrix","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"