INDEX_SIZE_ERR 在画布上绘制图像时

Question

我需要在画布上绘制一个 Image 对象，但我在 Firefox 和 IE10 中有一个 INDEX_SIZE_ERR 异常，但在 Chrome 和 Safari 中没有...

根据W3C：If one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception.。

这是导致问题的代码：

function writePhotoOnCanvas(data, width, height) {
    // Get the canvas
    var canvasGallery = document.getElementById("canvasGallery");
    // Clear the canvas
    canvasGallery.width = canvasGallery.width;
    // Get its context
    var ctxCapture = canvasGallery.getContext("2d");

    // Create an image in order to draw in the canvas
    var img = new Image();
    // Set image width
    img.width = width;
    // Set image height
    img.height = height;

    // To do when the image is loaded
    img.onload = function() {
        console.log("img.width="+img.width+", img.height="+img.height);
        console.log("width="+width+", height="+height+", canvasGallery.width="+canvasGallery.width+", canvasGallery.height="+canvasGallery.height);
        //  Draw the picture
        try {
            ctxCapture.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvasGallery.width, canvasGallery.height);
        } catch(e) {
            console.error(e.message);
        }
    };

    // Set image content from specified photo
    img.src = data;
}

控制台显示：

img.width=640, img.height=480
width=640, height=480, canvasGallery.width=589, canvasGallery.height=440
Index or size is negative or greater than the allowed amount

问题的根源是什么？

谢谢

Answer 1

您正在手动设置图像的宽度和高度 (img.width = width; img.height = height;)。我真的不明白你为什么要这样做，但这可能是不必要的。

这些应根据您加载的图像数据自动计算。尝试删除它们以查看数据的实际大小。

Answer 2

图像width 和height 是只读 属性，因此它们会导致代码在某些浏览器中中断。

如果您绝对想在加载图像之前设置宽度和高度，您可以这样做：

var img = new Image(width, height);

然后您可以读取图片加载后的img.width 和img.height（或读取img.naturalWidth 和img.naturalHeight 以获取原始尺寸）。

虽然没有必要这样做。只需像这样拨打您的drawImage()：

ctxCapture.drawImage(img, 0, 0, canvasGallery.width, canvasGallery.height);

这将使用图像的完整尺寸并将其缩放到canvasGallery 的尺寸。

提示：如果您使用此函数加载多个图像，您需要在 onload 处理程序中将 img 与 this 交换。

修改代码：

function writePhotoOnCanvas(data, width, height) {

    var canvasGallery = document.getElementById("canvasGallery");
    var ctxCapture = canvasGallery.getContext("2d");

    /// setting width to clear does not work in all browser, to be sure:
    ctxCapture.clearRect(0, 0, canvasGallery.width, canvasGallery.height);

    var img = new Image();
    img.onload = function() {
        //  Draw the picture
        try {
            ctxCapture.drawImage(this, 0, 0,
                                     canvasGallery.width, canvasGallery.height);
        } catch(e) {
            console.error(e.message);
        }
    };

    // Set image content from specified photo
    img.src = data;
}