Question

我有一个带背景图像的div，以及此背景上的2张图像（c1和c2）。 c1和c2使用Raphael JS类。我想用我的背景图像和c1和c2下载一个png图像（或jpg）。

我尝试在我的主要div上使用Canvas2Image，但是当我下载图像时我没有看到c1和c2。

你知道吗？这个div上包含所有组件的div截图？

谢谢大家，

Answer 1

为什么缺少“图片”

RaphaelJS使用SVG绘制，因此您的c1，c2绘图实际上不是图像 - 它们是SVG。

问题是绘制到html5画布上的SVG会触发安全限制，而后者又会停止将画布导出到图像中（当画布被污染时，context.toDataURL会被关闭）。

这意味着Canvas2Image无法显示您的c1，c2 image-svgs。

解决方法

首先，在主画布上绘制背景。

context.drawImage(bkImage,0,0);

其次，将您的RaphaelJS绘图转换为真实图像（不是SVG）并在主画布上绘制它们。

将您的一张RaphaelJS图纸（c1或c2）导出为SVG。导出到SVG的一个库是Raphael.Export
将该SVG（从＃1）转换为html5 Canvas绘图命令。 [有关将svg转换为canvas命令的一种方法，请参阅＃3。
将命令（从＃2）绘制到单独的html5画布上。一个将SVG转换为Canvas命令（==＃2）并将它们绘制到Canvas（==＃3）的库是canvg。
从单独的画布（来自＃3）创建一个imageObject。您可以使用Html5 Canvas本机命令canvas.toDataURL()创建一个数据URL，该URL可用作新imageObject的image.src。
```
var c1 = new Image;
c1.src = secondCanvas.toDataURL();
```
将真实图片绘制到主画布上。
```
context.drawImage(c1,0,0);
```

用c2重复＃1-5。

最后，既然您拥有符合安全性的图像（不是SVG），您可以直接将画布内容导出到图像（再次使用context.toDataURL）。如果你的div只包含背景图像加上c1，c2。

可能更简单的替代方案

SVG和Canvas绘图命令非常相似。如果c1，c2不依赖于非绘制的RaphaelJS方法，你可以使用原生的Canvas绘图命令（完全绕过Raphael）轻松绘制c1，c2。

未来的替代

SVG和Canvas都具有非常相似的绘图能力。

但是SVG增加了完整的DOM功能 - 完整的HTML元素事件＆amp;属性。 Canvas专注于渲染速度 - 以每秒60帧的速度渲染数百种形状。

推荐浏览器如何工作的组织（W3C）收到关于making SVG & Canvas drawings compatible的RFP

但是，SVG-Canvas交互性目前无法使用。