var offscreen = null, offscreen, ctx,gpu; time = parseInt(new Date().valueOf()) timeRed = [255, 0, 0, 1] timeGreen = [0, 255, 0, 1] timeColor = timeRed // const multiplyMatrix = self.gpu.createKernel(function(a, b) { // let sum = 0; // for (let i = 0; i < 512; i++) { // sum += a[this.thread.y][i] * b[i][this.thread.x]; // } // return sum; // }).setOutput([512, 512]); onmessage = async function (e) { let {msg,gpu} = e.data switch (msg) { case 'init': let {offscreen} = e.data if (offscreen) { self.gpu = gpu self.offscreen = offscreen self.ctx = self.offscreen.getContext('2d'); } // console.log('offscreen=>', offscreen) break; case 'run': run(e.data.payload) break } // var {width, height, imageData} = e.data.payload; // if (!offscreen && !ctx) { // offscreen = new OffscreenCanvas(width, height); // ctx = offscreen.getContext("2d"); // } // const imgblob = await fetch(imageData) // .then(r => r.blob()); // // console.log('imgblob=>', imgblob) // const img = await createImageBitmap(imgblob); // // console.log('img=>', img) // ctx.drawImage(img, 0, 0); // var imageBitmap = offscreen.transferToImageBitmap(); // postMessage({imageBitmap: imageBitmap}, [imageBitmap]); } async function run(payload) { let {width, height, imageData, colorMode, colorModeMap} = payload; //debug // // console.log('test=>', parseInt(new Date().valueOf()) - self.time) if (parseInt(new Date().valueOf()) - self.time > 5000) { self.time = parseInt(new Date().valueOf()) if (JSON.stringify(self.timeColor) === JSON.stringify(self.timeRed)) { self.timeColor = self.timeGreen } else { self.timeColor = self.timeRed } } let colorMap = colorModeMap[colorMode] // // console.log('draw offscreen=>', self.offscreen,e.data.payload) const imgblob = await fetch(imageData) .then(r => r.blob()); // // console.log('imgblob=>', imgblob) // // console.log('colorMode=>', colorMode) const img = await createImageBitmap(imgblob); self.ctx.clearRect(0, 0, width, height); self.ctx.drawImage(img, 0, 0) // colorMap = false if (colorMap) { let imageD = self.ctx.getImageData(0, 0, width, height); let pdata = imageD.data; // // console.log('pdata=>',pdata.length) // console.timeEnd('test'); // console.time('test'); for (let i = 0; i < pdata.length; i += 4) { // if (pdata[j] === color2[0]) pdata[j] = colorArr[0]; // if (pdata[j + 1] === color2[1]) pdata[j + 1] = colorArr[1]; // if (pdata[j + 2] === color2[2]) pdata[j + 2] = colorArr[2]; // // // console.log('colorMap[key]=>', colorMap[key]) let r = pdata[i] let j = pdata[i + 1] let b = pdata[i + 2] let a = pdata[i + 3] let map = [r, j, b, pdata[i + 4]] // // console.log('r=>',r) // if(r <= 80){ // pdata[i] = 255 // pdata[i + 1] = 255 // pdata[i + 2] = 0 // }else{ // pdata[i] = 0 // pdata[i + 1] = 0 // pdata[i + 2] = 255 // } for(let item of colorMap){ let {condition, result} = item let check = true // eval('2 >200') condition.map((_, index) => { let {symbol,target} = _ let ret = false switch (symbol) { case '>': ret = map[index] > target break; case '<': ret = map[index] < target break default: } if (!ret) { check = ret } }) if (check === true && result) { pdata[i] = result[0] pdata[i + 1] = result[1] pdata[i + 2] = result[2] pdata[3] = 0 break }else{ // // console.log('pdata=>',pdata[i],pdata[i+1],pdata[i+2],pdata[i+3]) continue } } // pdata[j] = colorMap[key][0] // pdata[j + 1] = colorMap[key][1] // pdata[j + 2] = colorMap[key][2] } // console.timeEnd('test'); // // console.log(' self.timeColor=>', self.timeColor) self.ctx.putImageData(imageD, 0, 0); // self.ctx.clearRect(0, 0, width, height); // self.ctx.drawImage(img, 0, 0) } }