仅保存HTML画布的某个部分

Question

是否可以仅保存或导出画布的某个部分而不是整个画布？

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

此刻,当我保存文件时,我得到了我在网站上的整个画布元素的构图加上透明背景(上面例子中的浅蓝色).我想得到的只是灰色区域(可以由几个图像和文本元素组成).

Answer 1

假设您有一个名为的画布，oldCanvas并且想要保存一个宽度w和高度为矩形的区域，h其左上角为x, y。

首先创建一个新canvas的width w和height 元素h：

var newCanvas = document.createElement('canvas');
newCanvas.width = w;
newCanvas.height = h;

现在将矩形区域复制到新画布：

var newContext = newCanvas.getContext('2d');
newContext.drawImage(oldCanvas, x, y, w, h, 0, 0, w, h);

最后，使用toDataUrl()或以前使用的任何方法保存新画布以保存整个画布。

例如，您可以使用新的画布制作图像：

var newImage = document.createElement('img');
newImage.src = newCanvas.toDataURL();

然后将新图像添加到网页：

document.body.appendChild(newImage);

或者，也许您有一个div想要附加到其上的容器。

无论如何，一旦图像进入文档，您就可以右键单击它并照常保存它。

我在以下代码段中实现了这种方法。运行它时，将随机绘制一个画布。单击并在画布上拖动以选择要下载的区域。新的可下载图像出现在右侧。

var newCanvas = document.createElement('canvas');
newCanvas.width = w;
newCanvas.height = h;

var newContext = newCanvas.getContext('2d');
newContext.drawImage(oldCanvas, x, y, w, h, 0, 0, w, h);

var newImage = document.createElement('img');
newImage.src = newCanvas.toDataURL();

Answer 2

是的你可以.这是JSFiddle.

首先,您需要clipping在画布中拍摄一张图像.这很简单.我制作了另一个画布(一个隐藏的画布)并使用了context.drawImage

var hidden_ctx = hidden_canvas.getContext('2d');

hidden_ctx.drawImage(
    MainCanvas,
    startClippingX,
    startClippingY,
    clippingWidth,
    clippingHeight,
    pasteX,
    pasteY,
    pasteWidth,
    pasteHeight
);

现在,我们需要来自此画布的数据URL,以便我们可以下载内容.为此,我们将使用该canvas.toDataURL方法.

var data_url = hidden_canv.toDataURL("image/png");

现在,我们需要做的就是建立一个下载链接(一个a具有href我们属性的元素data_url),我们就完成了!