将 SVG 和 .JPG 合并为一张图像？答案

【问题标题】：Merge SVG and .JPG into one image?将 SVG 和 .JPG 合并为一张图像？
【发布时间】：2012-04-13 06:47:46
【问题描述】：

我有一个在地图应用程序中使用 SVG/VML（通过 Raphael JS）设置的网站，其中 SVG 用于在背景地图图像上显示图形。这在屏幕上效果很好，并且用于打印带有叠加层的硬拷贝地图。然而，当用户想要将带有 SVG 覆盖的地图图像保存到本地 .JPG 文件时，此设置会崩溃。

更具体地说，当图像顶部有 SVG/VML 元素时，使用大多数浏览器的标准右键单击功能“将图像另存为...”不起作用。右键单击地图，用户可以保存地图图像，但没有覆盖。右键单击覆盖的 SVG 元素，用户获得的最佳效果是能够检查元素或保存一些 HTML（它因浏览器而异）。

所以我的主要问题是；是否可以获取图像和 SVG 元素并将它们（最好是客户端，尽管我愿意选择）组合成一个“扁平”图像，.JPG，.PNG 或其他，然后可以右键单击并根据要求保存或下载到用户的 PC 上？

【问题讨论】：

选项是否包括 ImageMagick？ imagemagick.org/script/magick-vector-graphics.php
可能重复：stackoverflow.com/questions/4086703/…stackoverflow.com/questions/3975499/…
我正在研究 PHP 的 Imagick 扩展，以可能完成我想要做的事情。至于可能的重复线程，我已经查看了这两个线程，并且对 Canvas 的依赖和 IE 的缺乏使得它很难适合应该是与浏览器无关的应用程序。这两个线程仅解决将 SVG 本身转换为图形的问题，而不是将所述 SVG 图形和另一个图形合并为单个图像。
您可以在渲染之前将jpg 图像动态包含到矢量画布中（作为矢量形状），从而避免对不同来源的解释。

标签： javascript svg raphael

【解决方案1】：

你需要做的是，而不是叠加 JPG 和 SVG：

拍摄原图
在内存中画出SVG文件中的线条
将该单个图像以 JPG 格式输出到浏览器。

这当然意味着你必须能够解释 SVG...

【讨论】：

好的...这是否可以使用标准的客户端 JavaScript 或服务器上的其他东西？我不确定你在“内存中”的图像上画线是什么意思
绘图不会在浏览器中完成（就像使用 JavaScript 一样），而是在处理请求的进程中的服务器上完成。

【解决方案2】：

一种可能是将图像嵌入到 SVG 中，然后使用组合图像生成数据 URL。以下示例以 png 格式实现了这一点：

 var datauri = c.toDataURL('image/png');

其中 c 是格式化的 SVG 图层。有关更多信息，请查看 svgcanvas.js 和 svg-editor.js 文件中的这个开源编辑器 http://code.google.com/p/svg-edit/，这是如何将 SVG 导出为 png 文件的一个很好的示例。一开始有点难理解，但是写的很好。

【讨论】：

【解决方案3】：

恐怕你会因为安全限制而尝试在 Canvas 元素上呈现 SVG 时遇到困难（例如，我根本无法在 Firefox 中使用它）。

这里有一个想法：

使用 svg <image> 标签将图像放置在 SVG DOM 中
通过 canvg 库传递您的 SVG 代码
使用canvg的toDataURL方法生成图片

【讨论】：