使用.todataurl Javascript/HTML5捕获部分画布

Question

我可以毫无问题地使用.todataurl捕获完整的画布.但我没有看到或知道是否有任何方法只捕获画布的一部分并保存到图像.

ei Potatohead先生的脚本画出了整个画布上的帽子,手脚等等,你可以将它们拖放到画布中心的mr土豆上.按下按钮保存马铃薯先生的形象,为你寻找所有漂亮的jpgy.没有图像中所有额外的帽子/脚/面.

我已经让自己屈服于这样一个事实:根据我读过的所有内容,这是不可能的.但是你已经证明了人们比谷歌更聪明(或者至少谷歌在我手中),所以我正在拍摄.

对不起没有代码发布这个时间...除非你想要这个:

var canvas  = document.getElementById("mrp");
var dataUrl = canvas.toDataURL();

window.open(dataUrl, "toDataURL() image", "width=800, height=600");

但这只是我正在处理的数据的例子..它的作用超出了事实上它不仅限于土豆先生

我的后备是将图像传递给php并在那里使用它来删除我不想要的所有内容然后将其传回去.

编辑

tmcw有一个这样做的方法.不知道它应该怎么做,但它确实有效.

document.getElementById('grow').innerHTML="<canvas id='dtemp' ></canvas>";
var SecondaryCanvas  = document.getElementById("dtemp");
var SecondaryCanvas_Context = SecondaryCanvas.getContext ("2d");
SecondaryCanvas_Context.canvas.width = 600;
SecondaryCanvas_Context.canvas.height = 600;
var img = new Image();
img.src = MainCanvas.toDataURL('image/png');
SecondaryCanvas_Context.drawImage(img, -400, -300);
var du = SecondaryCanvas.toDataURL();
window.open(du, "toDataURL() image", "width=600, height=600");
document.getElementById('grow').innerHTML="";

grow是一个空的span标签,SecondaryCanvas是一个专为此创建的var SecondaryCanvas_Context是创建的SecondaryCanvas img的getcontext,用于存储包含Mr PotatoHead drawImage的主画布的.toDataURL(),带有负( - )偏移以移动图像MainCanvas,以便只显示我想要的部分.然后盖上刚创建的新画布并打开一个带有.png的新窗口

如果你从脚本中得到一个错误,说安全错误18因为你忘了将imgTop重命名为img,其余的变量你复制粘贴,当你试图保存像这样的本地内容图像时,chrome不喜欢它.

Answer 1

创建一个特定大小的新Canvas对象,使用drawImage将画布的特定部分复制到新画布的特定区域,并在新画布上使用toDataURL().

Answer 2

这是一种使用屏幕外画布的方法：

var canvas = document.createElement('canvas');
canvas.width = desiredWidth;
canvas.height = desiredHeight;
canvas.getContext('2d').drawImage(originalCanvas,x,y,w,h,0,0,desiredWidth, desiredHeight);
result = canvas.toDataURL()