是否可以只保存或导出 Canvas 的特定部分而不是整个 Canvas ?
http://i.stack.imgur.com/hmvYh.jpg
目前,当我保存文件时,我得到了网站上整个 Canvas 元素的合成加上透明背景(在上面的示例中为浅蓝色)。我想得到的只是灰色区域(可以由多个图像和文本元素组成)。
最佳答案
是的,你可以。这是 the JSFiddle .
首先,您需要对 Canvas 中的图像进行剪辑
。这很简单。我制作了另一个 Canvas (一个隐藏的 Canvas )并使用了 context.drawImage
var hidden_ctx = hidden_canvas.getContext('2d');
hidden_ctx.drawImage(
MainCanvas,
startClippingX,
startClippingY,
clippingWidth,
clippingHeight,
pasteX,
pasteY,
pasteWidth,
pasteHeight
);
现在,我们需要此 Canvas 的数据 URL,以便我们可以下载内容。为此,我们将使用 canvas.toDataURL
方法。
var data_url = hidden_canv.toDataURL("image/png");
现在,我们需要做的就是制作一个下载链接(一个带有 data_url
的 href
属性的 a
元素),然后我们完成了!
关于javascript - 仅保存 HTML Canvas 的特定部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32256567/