Javascript Canvas-IndexSizeError:索引或大小为负或大于允许的数量

所以在Firefox中，当在画布元素上使用drawImage时，我在控制台中遇到了这个错误

"IndexSizeError: Index or size is negative or greater than the allowed amount"

在Chrome中一切正常。我发现的常见原因是返回负值或在实际加载图像之前尝试将图像绘制到画布。这两种情况似乎都不是这样。我错过了什么

任何想法都将不胜感激

var NameSpace=NameSpace | |{}；
NameSpace.Pixelator=（函数（）{
变量_缓存={
“包装器”：null，
“画布”：null，
“ctx”：null，
“img”：新图像（）
},
_配置={
“画布宽度”：250，
“画布高度”：250，
“iPlaying”：错误，
"明":3,，
“最大值”：100，
“扭曲值”：100，//默认情况下与扭曲最大值匹配
“初始值”：3，
“速度”：2.5，
“delta”：2.5，//delta（+/-step），默认情况下与速度匹配
“动画”：null，
“origImgWidth”：null，
“OrigighHeight”：null，
“imgHeightRatio”：null，
“imgWidthRatio”：null，
“newImgWidth”：null，
“newImgHeight”：null
},
_init=函数_init（）{
_setupCache（）；
_setupCanvas（）；
_setupImage（）；
},
_setupCache=函数_setupCache（）{
_cache.wrapper=$（“#虚拟包装器”）；
_cache.canvas=document.getElementById（'dummy-canvas'）；
_cache.ctx=_cache.canvas.getContext（'2d'）；
},
_setupCanvas=函数_setupCanvas（）{
_cache.ctx.mozimagesoothingEnabled=false；
_cache.ctx.webkitmagesmoothingEnabled=false；
_cache.ctx.imageSmoothingEnabled=false；
},
_setupImage=函数_setupImage（）{
_cache.img.onload=函数（）{
_调整图像比例（）；
_像素（）；
_赋值事件（）；
};
_cache.img.src=_cache.canvas.getAttribute（'data-src'）；
},
_adjustImageScale=功能_adjustImageScale（）{
var标度高度，
标度宽度；
_config.origImgWidth=\u cache.img.width；
_config.origImgHeight=\u cache.img.height；
_config.imghlightratio=\u config.origImgHeight/\u config.origImgWidth；
_config.imgWidthRatio=\u config.origImgWidth/\u config.origImgHeight；
scaledHeight=数学圆（250*_config.imghtRatio）；
scaledWidth=Math.round（250*_config.imgWidthRatio）；
如果（标度高度<250）{
_config.newImgHeight=250；
_config.newImgWidth=Math.round（_config.newImgHeight*_config.imgWidthRatio）；
}否则如果（缩放宽度<250）{
_config.newImgWidth=250；
_config.newImgHeight=Math.round（_config.newImgWidth*_config.imgheight比率）；
}
},
_assignEvents=函数_assignEvents（）{
_cache.wrapper.on（'mouseenter'，_mouseEnterHandler）；
_cache.wrapper.on（'mouseleave'，_mouseLeaveHandler）；
},
_mouseEnterHandler=函数_mouseEnterHandler（e）{
_config.delta=--u config.speed；
如果（_config.isPlaying==false）{
_config.isplay=true；
_制作动画（）；
}
},
_mouseLeaveHandler=函数_mouseLeaveHandler（e）{
_config.delta=_config.speed；
如果（_config.isPlaying==false）{
_config.isplay=true；
_制作动画（）；
}
},
_像素=函数_像素（val）{
变量大小=val？val*0.01:1，
w=Math.ceil（_config.newImgWidth*size），
h=Math.ceil（_config.newImgHeight*size）；
log（'w:'+w，'h:'+h'，'u config.newImgWidth:'+'u config.newImgWidth'，'u config.newImgHeight:'+'u config.newImgHeight'）；
_cache.ctx.drawImage（_cache.img，0，0，w，h）；
_cache.ctx.drawImage（_cache.canvas，0，0，w，h，0，0，_config.canvaswitch，_config.canvaswitch）；
},
_动画=函数_animate（）{
//通过鼠标移过/移出增量设置增加/减少
_config.value+=\u config.delta；
如果在使用剪裁时（_config.trunteValue>=_config.truntemax | | | | u config.trunteValue），则需要确保源区域位于图像内（目标区域不需要，因为画布将对其进行剪裁）

因此，如果您添加限制控件，它应该可以工作。下面是一种方法（在使用
drawImage
的剪裁功能之前）：


提示1:

通常情况下，这也适用于x和y，但由于此处的值为0，因此无需检查

提示2：

如果需要将图像绘制得比需要的窄，而不是更改源区域，请更改目标区域。
指定大小值时绘制的图像的宽度和高度应大于或等于1。此外，为了性能优势
地板
所有通过的值o它。

如果宽度和/或高度为0，将导致：

IndexSizeError: Index or size is negative or greater than the allowed amount

在Firefox中：

width = Math.max(1, Math.floor(width));
height = Math.max(1, Math.floor(height));
ctx.drawImage(image, x, y, width, height);

为了帮助其他人，我在canvas中遇到了同样的问题，我在考虑图像加载时解决了这个问题，例如：

var image = new Image();
image.crossOrigin = "use-credentials";
image.onload = function(){
    // here canvas behavior
};
image.src = imgSrc;

我也有同样的问题，但在IE和Safari中，有三件事我特别需要解决：

1） 我必须手动设置图像的
宽度
和
高度

var image = new Image();
...
image.width = 34;
image.height = 34;

2） 在创建
ol.style.Icon
时，我必须避免使用负偏移量。在这种情况下，我必须更改SVG图标，但这在很大程度上取决于您的图标。因此，由于负偏移量，这将导致异常：

var icon = new ol.style.Style({
    "image": new ol.style.Icon({
        ...
        "offset": [0, -50]
    })
});

3） 我必须对宽度和高度值进行四舍五入。由于其中一些值是动态计算的，我的值像
34.378
，这会导致问题。因此我必须对它们进行四舍五入并传递整数
var image = new Image();
...
image.width = 34;
image.height = 34;

var icon = new ol.style.Style({
    "image": new ol.style.Icon({
        ...
        "offset": [0, -50]
    })
});