Question

我可以使用.todataurl捕获完整的画布而不会出现问题。但我没有看到或知道是否有任何方法只捕获画布的一部分并将其保存为图像。

E.I。 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的getcontext 创建img只是为了存储包含Mr. PotatoHead的主画布的.toDataURL（）带负（ - ）偏移的drawImage移动MainCanvas的图像，以便只显示我想要的部分。然后盖上刚刚创建的新画布并使用.png

打开一个新窗口

on并且如果你从脚本中得到错误说安全错误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()

Answer 3

提取图像的一部分的效率更高（也许更干净）：

metric=0

Answer 4

你可以给toDataURL函数赋予left，top，width和Height参数。这是根据画布上的对象获取数据图像的代码。

mainObj = "your desired Object"; // for example canvas._objects[0];

var image   = canvas.toDataURL({ left: mainObj.left, top:mainObj.top,
    width: mainObj.width*mainObj.scaleX, height: mainObj.height*mainObj.scaleY});

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

4 个答案: