Question

我知道已经有人问过这个问题，但是我发现的许多答案尚无定论，这些问题并不能准确地描述我的具体问题。

我需要做的只是在画布上进行“选择复制粘贴”，在Microsoft Paint上花费很少的时间，但是在JS中却变得异常困难。关键是，我实际上需要在宽度/高度最大为12,000像素的图像上执行数千个图像，因此在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.

需要注意的一些重要事情是所有这些文件都在我的本地目录中（确切地说是在我的桌面上的文件夹中），因此我不参与任何网站或主机或任何与Internet相关的活动。另外，我没有运行任何服务器，也没有任何服务器，因此无法更改任何授权或CORS设置；毕竟，我为什么要这么做？我要做的就是复制和粘贴像素。

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

如果有人可以通过解决这个问题来启发我，我将非常感激。

编辑

我很早就没有尝试过，这很愚蠢，但是我找到了一个非常简单的解决方案：使用Explorer而不是Chrome。调用getImageData时，资源管理器不会引发任何错误。

我需要一种将画布的一部分复制到同一画布上其他位置的方法

编辑

0 个答案: