Question

我在HTML5画布中创建一个应用程序，用于裁剪图像。 DOM中有3幅画布，一幅用于绘制线条，一幅用于原始图像，另一幅用于结果。

这是我使用的代码。

// copy image data to secondary canvas
var pixelData = ctx.getImageData(x-10, y-10, 20, 20);
var tmpCanvas = document.createElement("canvas");
tmpCanvas.width = 20; tmpCanvas.height = 20;
var tmpCtx = tmpCanvas.getContext("2d");
tmpCtx.putImageData(pixelData, x, y);
var tmpImageEl = document.createElement("img");
tmpImageEl.onload = function(){
    ctxCopy.drawImage(this, x, y);
}
console.log(tmpCanvas.toDataURL());
tmpImageEl.src = tmpCanvas.toDataURL();
//ctxCopy.putImageData(pixelData, x, y);

//document.getElementsByTagName("body")[0].appendChild(tmpCanvas);

在这一行

tmpImageEl.src = tmpCanvas.toDataURL();

我什么都没有，只有空白/透明的图像。我期望的是来自原始源的imagedata ..代码有什么问题？如果putImageData有圆形选项，这对我来说可能更容易（我在google上搜索圆形putImageData，没有运气）

Answer 1

您的ctxCopy似乎没有被定义;你可能打算这样做：

var tmpCtx = tmpCanvas.getContext("2d");
...
tmpImageEl.onload = function(){
    tmpCtx.drawImage(this, x, y);    /// for your temporary canvas
    //ctxCopy.drawImage(this, x, y);    
}

Chrome中还存在一个问题，即数据uris作为来源;你可以通过首先设置一个空字符串，然后是data-uri：

来解决这个问题

tmpImageEl.src = '';
tmpImageEl.src = tmpCanvas.toDataURL();

但是，只需在临时画布上直接使用drawImage()方法在源画布上绘制（它可以拍摄图像，画布和视频），就可以省去一些麻烦作为来源输入）：

var tmpCanvas = document.createElement("canvas");
tmpCanvas.width = tmpCanvas.height = 20;
var tmpCtx = tmpCanvas.getContext("2d");

tmpCtx.drawImage(ctx.canvas, 0, 0);

无需getPixelData() / putImageData() / image，而且速度更快。

希望这有帮助。

html5 canvas copy imageData to tmpcanvas

1 个答案: