javascript - 仅保存 HTML Canvas 的特定部分

Question

是否可以只保存或导出 Canvas 的特定部分而不是整个 Canvas ？

http://i.stack.imgur.com/hmvYh.jpg

目前，当我保存文件时，我得到了网站上整个 Canvas 元素的合成加上透明背景(在上面的示例中为浅蓝色)。我想得到的只是灰色区域(可以由多个图像和文本元素组成)。

Answer 1

是的，你可以。这是 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 元素)，然后我们完成了!