canvas实现计算图片底色

此代码是小程序实现， 其实小程序的canvas抄的一模一样， 改成web就改关键词。

需求是这样，计算图片的底色是否偏白， 偏白加外边框颜色，下面是实现代码/

export default function(e){
    setTimeout((_: any) => {
        interface ImgT {
            width: number
            height: number
        }
        // 取边缘像素的平均值
        let getVal = (img: imgT,data: any) : number [] => {
            var w = img.w
            ,h = img.h
            ,r = 0, g = 0, b = 0
            ,iw = w, ih = (w*h*4) / (w*4) 
            ,pw = [2, 2, 2, 2] // 上左下右
            ,useNum = 0
            for(var i = 0; i<= (w*h*4) - 3; i+=4){
                if(
                    (i/4/w) > pw[0] && (i/4/w) < ih - pw[2] && 
                    (i/4/h) > pw[1] && (i/4/h) < ih - pw[3]
                ){
                    r += data[i]
                    g += data[i+1]
                    b += data[i+2]
                    useNum++
                }
            }
            return [r, g, b].map(e => (e / (useNum)))
                .map(e => e | 0)
        }
        try{
            const canvasId = 'goodsSpecCanvas'
            const ctx = wx.createCanvasContext(canvasId)
            let item = e.goods_spec[0]
            // e.goods_spec.forEach(e => {
                let imgUrl = item.img
                if(!imgUrl){
                    console.log('---商品规格图片为空---')
                    return
                }
                let imgWidth = 200
                let imgHeight = 200
                // TODO 清空画图
                wx.downloadFile({
                    url: imgUrl,
                    success: function(res) {
                        // 背景图
                        ctx.drawImage(res.tempFilePath, 0, 0, imgWidth, imgHeight)
                        ctx.draw()
                        // 这里需要改一下。
                        setTimeout(() => {
                            wx.canvasGetImageData({
                                canvasId,
                                x: 0, y: 0,
                                width: imgWidth, height: imgHeight,
                                success(res) {
                                    let rgb = getVal({w: imgWidth, h: imgHeight}, res.data)
                                    console.log('---商品规格平均值---')
                                    console.log(rgb)
                                }
                            })
                        }, 3e3)
                    }
                })                
            // })
        }catch(e){
            console.log(e)
        }
    }, 0)

}

--END--