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

Question

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

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参数。然而一个是有效的，另一个有例外。

我想使用后面的代码，所以我可以直接对x替换.sx和.dx的x和y值，而不是sx / TILE_WIDTH == dx / OUT_WIDTH。我想我总是可以添加另外两个字段来复制这些努力，但似乎我不应该这样做。

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

Answer 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）

Answer 2

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

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

的大小

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

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