Raphael JS 和 div 上的屏幕截图

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）并在主画布上绘制它们。

1. 将您的一张 RaphaelJS 绘图（c1 或 c2）导出为 SVG。一个导出到 SVG 的库是 Raphael.Export

2. 将该 SVG（从#1）转换为 html5 Canvas 绘图命令。 [参见 #3 了解将 svg 转换为画布命令的一种方法]。

3. 将命令（来自#2）绘制到单独的 html5 画布上。 canvg 是一个既能将 SVG 转换为 Canvas 命令 (==#2) 又能将它们绘制到 Canvas (==#3) 的库。

4. 从单独的画布（来自#3）创建一个图像对象。您可以使用 Html5 Canvas 原生命令 canvas.toDataURL() 创建一个数据 url，该数据 url 可用作新 imageObject 的 image.src。

   var c1 = new Image;
   c1.src = secondCanvas.toDataURL();
   

5. 将真实图像绘制到您的主画布上。

   context.drawImage(c1,0,0);
   

用 c2 重复 #1-5。

最后，现在您有了符合安全标准的图像（不是 SVG），您可以直接将画布内容导出到图像（同样，使用 context.toDataURL）。如果你的 div 只包含背景图片和 c1,c2，你甚至不需要 Canvas2Image。

一种可能更简单的替代方法

SVG 和 Canvas 绘图命令非常相似。如果 c1,c2 不依赖于非绘图 RaphaelJS 方法，您可以使用本机 Canvas 绘图命令（完全绕过 Raphael）相当轻松地绘制 c1,c2。

未来的替代方案

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

但是 SVG 添加了完整的 DOM 功能——完整的 html 元素事件和属性。 Canvas 专注于渲染速度——以每秒 60 帧的速度渲染数百个形状。

推荐浏览器工作方式的组织 (W3C) 收到关于 making SVG & Canvas drawings compatible 的 RFP

但是，SVG-Canvas 交互性目前不可用。