Javascript html5画布将图像数据复制到tmpcanvas
我在HTML5画布上创建了一个应用程序,用于裁剪图像。DOM中有3个画布,一个用于绘制线,一个用于原始图像,另一个用于结果 这是我使用的代码Javascript html5画布将图像数据复制到tmpcanvas,javascript,html,canvas,Javascript,Html,Canvas,我在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.heig
// 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有四舍五入选项,这对我来说可能更容易(我经常在谷歌上搜索四舍五入的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()
方法在源画布中绘制(可以将图像、画布和视频作为源输入),就可以省去一些麻烦:
不需要getPixelData()
/putImageData()
/image
,这样速度更快
希望这有帮助。也许您可以澄清代码示例,以便我们清楚地看到3张画布和工作流。什么是ctxCopy?什么是
ctxCopy
,它来自哪里?您的源代码中缺少它。创建临时映像的原因是什么?您可以将另一个画布作为源参数使用drawImage
。嘿,对不起。这是完整的脚本(assets/js/app.js)请尝试上载您的图像,然后您的图像将应用到画布,然后您可以在画布中绘制,我希望可以将源代码复制到结果画布(底部)。请尝试此操作并上载您自己的图像,然后将鼠标拖动到画布中
var tmpCanvas = document.createElement("canvas");
tmpCanvas.width = tmpCanvas.height = 20;
var tmpCtx = tmpCanvas.getContext("2d");
tmpCtx.drawImage(ctx.canvas, 0, 0);