javascript-canvas 未捕获的错误：INDEX_SIZE_ERR：DOM 异常 1答案

【问题标题】：javascript-canvas Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1javascript-canvas 未捕获的错误：INDEX_SIZE_ERR：DOM 异常 1
【发布时间】：2011-04-04 00:45:31
【问题描述】：

好的，我的代码有两个版本。第一个似乎有效（大部分），第二个给我主题名称中的未捕获错误。

defs:

var VID_WID = 640;
var VID_HIGH = 360;
var OUT_WID = 480;
var OUT_HIGH = 320;
var NUM_WID = 3;
var NUM_HIGH = 3;


var TILE_WIDTH = VID_WID / NUM_WID;
var TILE_HEIGHT = VID_HIGH / NUM_HIGH;
var OUT_WIDTH = OUT_WID / NUM_WID;
var OUT_HEIGHT = OUT_HIGH / NUM_HIGH;

Working:
    tile.sx = x*TILE_WIDTH;
    tile.sy = y*TILE_HEIGHT;
    tile.dx = x*OUT_WIDTH;
    tile.dy = y*OUT_HEIGHT;
...
    draw.drawImage(copycanvas, tile.sx, tile.sy,
        TILE_WIDTH, TILE_HEIGHT,
        tile.dx, tile.dy,
        OUT_WIDTH, OUT_HEIGHT);

Gets Exception:
    tile.sx = x;
    tile.sy = y;
    tile.dx = x;
    tile.dy = y;
...
    draw.drawImage(copycanvas, tile.sx*TILE_WIDTH, tile.sy*TILE_HEIGHT,
        TILE_WIDTH, TILE_HEIGHT,
        tile.dx*OUT_WIDTH, tile.dy*OUT_HEIGHT,
        OUT_WIDTH, OUT_HEIGHT);

我看到的唯一区别是我在哪里乘以 WIDTH 和 HEIGHT 参数。然而一个有效，另一个给出了例外。

我想使用后一个代码，这样我就可以将 .sx 和 .dx 的 x 和 y 值直接与 x 进行比较，而不是 sx/TILE_WIDTH == dx/OUT_WIDTH。我想我总是可以添加另外几个字段来重复这项工作，但似乎我不应该这样做。

知道为什么一个有效而另一个无效吗？

【问题讨论】：

您是否有机会提供复制链接？

标签： javascript exception dom html canvas

【解决方案1】：

首先请看下面的图片。

我也得到了同样的错误代码。就我而言，“源图像”的大小为 640 x 480。我将 sx, sy 参数分配为 10,10，将 sWidth,sHeight 参数分配为 640,480。然后我得到了和你一样的错误代码。

因为 sx,sy 参数将捕获窗口移动了 10,10 像素， sWidth,sHeight 窗口超出范围。

在我的想法中，我造成 INDEX_SIZE_ERROR 是因为没有数据可以参考。，我将超大的 sWidth 设置为 sHeight。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

【讨论】：

【解决方案2】：

好的，好的。可能是飞行员失误，或者至少是驾驶舱问题。

练习的重点是操作图像并处理需要将传入的图像缩放到特定输出大小的情况。看起来，在一个咒语（或实例化，如果您更喜欢更好的英语）中，源画布的大小设置为与目标画布匹配的 (480x320)，而不是输入视频的正确大小 (640x360)以及 VID_WIDTH,VID_HEIGHT 标注的尺寸。

答案是验证画布大小是否与您正在绘制的区域相匹配。如果没有，您可能会收到 index_size_error 异常。

在一个块中编写较大的视频是可以的，但是当您使用剪贴蒙版/区域时，您最好在范围内。（有人可以验证吗？）

【讨论】：