我在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();
我只得到一张空白/透明的照片。我所期望的是原始来源的图像数据。。代码出了什么问题?如果putImageData有四舍五入的选项,这对我来说会更容易(我很容易在谷歌上搜索四舍五进的putImageData,运气不好)
您的ctxCopy
似乎没有定义;你可能打算这样做:
var tmpCtx = tmpCanvas.getContext("2d");
...
tmpImageEl.onload = function(){
tmpCtx.drawImage(this, x, y); /// for your temporary canvas
//ctxCopy.drawImage(this, x, y);
}
Chrome中也存在一个以数据uri为源的问题;您可以通过首先设置一个空字符串,然后设置数据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
,而且这种方式要快得多。
希望这能有所帮助。