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

Question

我可以毫无问题地使用 .todataurl 捕获完整的画布。但我不知道也不知道是否有办法只捕获画布的一部分并将其保存到图像中。

e.i. Mr. Potatohead 脚本在画布上混合了帽子、手脚脸等，您可以将它们拖放到画布中心的 mr potato 上。按下一个按钮，为您将看起来很漂亮的土豆先生的图像保存为 jpg。没有图像中所有额外的帽子/脚/脸。

我已经接受了这样一个事实，即根据我所阅读的所有内容，这是不可能的。但是你们已经证明比谷歌（或至少在我手中的谷歌）更聪明几次，所以我要试一试。

很抱歉这次没有代码可以发布...除非你想要这个：

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

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

但这只是我正在使用的 dataurl 的示例.. 它的工作原理是它不只限制马铃薯先生

我的后备是将图像传递给 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 打开一个新窗口

如果您从脚本中收到错误提示 security err 18 它是因为您忘记将 imgTop 重命名为 img 并使用您复制粘贴的其余变量，并且当您尝试保存本地内容图像时 chrome 不喜欢这样.

Answer 1

这是一个使用离屏画布的方法：

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 2

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

Answer 3

提取部分图像的更有效（并且可能更清洁）的方式：

// x,y are position in the original canvas you want to take part of the image
// desiredWidth,desiredHeight is the size of the image you want to have
// get raw image data
var imageContentRaw = originalCanvas.getContext('2d').getImageData(x,y,desiredWidth,desiredHeight);
// create new canvas
var canvas = document.createElement('canvas');
// with the correct size
canvas.width = desiredWidth;
canvas.height = desiredHeight;
// put there raw image data
// expected to be faster as tere are no scaling, etc
canvas.getContext('2d').putImageData(imageContentRaw, 0, 0);
// get image data (encoded as bas64)
result = canvas.toDataURL("image/jpeg", 1.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});