火狐报错 Index or size is negative...

Question

问题描述利用canvas改变图片的颜色， 谷歌运行正常， 火狐报错IndexSizeError: Index or size is negative or greater than the allowed amount问题出现的环境背景及自己尝试过哪些方法相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）revertColor(type) {    let config = {        attention: {            url: this.local.myAttention.map(it => it.dataIconUrl),            className: '.myAttention-icon',            size: 32,            padding: 4        },        dataProduct: {            url: this.local.dataProductList.map(it => it.productIcon),            className: '.dataProduct-icon',            size: 45.6,            padding: 0        }    };    let {url, className, size, padding} = config[type];    size = Math.floor(size)    url = url.slice(0, 8);    (Array.from($(className)) || []).forEach((node, idx) => {        let canvas = node.getContext('2d');        let img = new Image();        img.src = url[idx];        img.onload = function () {            canvas.drawImage(img, padding, padding, size, size);            let imgData = canvas.getImageData(padding, padding, img.width, img.height) || {};            let colorData = imgData.data;            for (let i = 0; i < colorData.length; i += 4) {                if (!(colorData[i] === 75 && colorData[i + 1] === 164 && colorData[i + 2] === 190)) {                    // 将除底色以外的所有颜色重置                    colorData[i] = 255;                    colorData[i + 1] = 255;                    colorData[i + 2] = 255;                }            }            canvas.clearRect(0, 0, $(className).width(), $(className).height());             canvas.putImageData(imgData, padding, padding);        }    });}你期待的结果是什么？实际看到的错误信息又是什么？火狐浏览器发现图片根本没有被绘制上去， 应该是drawImage的时候就已经出问题了

Answer 1

drawImage之前做一下判断~

if (w > _config.canvasWidth) w = _config.canvasWidth;

if (h > _config.canvasHeight) h = _config.canvasHeight;

_cache.ctx.drawImage(_cache.canvas, 0, 0, w, h,

                      0, 0, _config.canvasWidth, _config.canvasHeight);