0

我知道这已经被问过了，但是我发现的许多答案都没有定论，而且这些问题并不能完全描述我的具体问题。

我需要做的就是在画布上进行“选择-复制-粘贴”，这在 Microsoft Paint 上花费的时间很少，但在 JS 中却非常困难。关键是，我实际上需要在宽度/高度高达 12000 像素的图像上执行几千次，因此在 Paint 上执行此操作不是一种选择。

这是我可以写的最基本的例子，只是为了关注我遇到的问题：

这是 HTML 正文：

<canvas id="canvas" width="200" height="100"></canvas>
<img id="house" class="hidden" type="img/png" src="house.png"></img>

这是JS：

window.onload = function () {
    var ctx = document.getElementById("canvas").getContext("2d");
    var house = document.getElementById("house");

    ctx.drawImage(house, 10, 10);
    var data = ctx.getImageData(10, 10, 80, 80); // ERROR
    ctx.putImageData(data, 110, 10);
}

而且（尽管我认为这无关紧要）这是CSS：

.hidden {
    display: none;
}

我用“ERROR”评论的那一行抛出了以下内容： Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

需要注意的一些重要事项是所有这些文件都在我的本地目录中（确切地说，在我桌面上的文件夹中），所以我不涉及任何网站或主机或任何依赖互联网的东西。此外，我没有运行任何服务器，也没有任何服务器，因此我无法更改任何授权或 CORS 设置；毕竟，我为什么要这样做？我要做的就是复制和粘贴像素。

我还尝试创建 12k x 12k 的字符串矩阵，其中每个字符串代表图像的像素值。这样我就不必getImageData在画布上使用，但我可以处理字符串并更改它们的值，但这不起作用，因为我不能getImageData在图像上使用。

如果有人能启发我解决这个问题，我将非常感激。

编辑

之前没有尝试过我觉得很傻，但是我找到了一个非常简单的解决方案：使用资源管理器而不是 Chrome。Explorer 在调用时不会抛出任何错误getImageData。

4

0 回答 0