web/public/gis/workers/OffscreenDraw.js

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)
    }
}