Question

我正在使用HTML5画布来显示具有zoomin / out功能的图像。它工作正常。但是，我还需要编辑图像。例如，在鼠标点击时，我需要在图像中替换一定大小的网格（大小是动态的，并不总是固定的）。所以我正在使用 context.putImageData(imgData, x, y)，其中imgData是要在x，y位置替换的10 * 10网格（例如）。

这很好用。但当我放大/缩小时，我的所有图像编辑都会消失。我认为原因是，putImageData只替换在canvas元素的内存中，并且永远不会更新原始图像源。

我想知道如何克服这个问题？我想我需要编辑原始图像，然后使用drawImage()而不是直接使用context.putImageData()来绘制它。

但我该怎么做？

// @ startup // currentScale = 1.0

var photo = new Image();
photo.src = "./Ship1.png";
photo.addEventListener('load', eventPhotoLoaded, false); 
function drawImage()
{

this.context.drawImage(photo, 0, 0, photo.width,photo.height, 0, 0, photo.width * currentScale,  photo.height* currentScale);
}

//正确显示图像

// Onmouse点击

theCanvas.addEventListener('click', function(evt) {
var rect = this.theCanvas.getBoundingClientRect();
x = evt.clientX - rect.left;
y = evt.clientY - rect.top;

//newGird is an array of cells containing R,G,B and Alpha values
context.putImageData(newGird, x, y)

//上面的代码使用newGrid正确地更新了点x，y处的画布图像。到目前为止看起来很棒。

//有zoomin / out按钮。然后在按钮单击时，我更改currentScale的值并调用drawImage（）方法。放大/缩小是正确完成的，但正如预期的那样，putImageData（）所做的更改会被原始图像覆盖，因为这些更改从未保存回图像。

Answer 1

现在解决了这个问题。在步骤3中，可以通过更改canvas.style.width和canvas.style.height来完成缩放，而不是再次调用drawImage。所以，它工作正常。谢谢philipp和yoursweater

编辑HTML5 canvas元素中显示的缩放图像

1 个答案: