将SVG和.JPG合并到一个图像中

Merge SVG and .JPG into one image?

本文关键字：一个 图像 SVG JPG 合并      更新时间：2023-09-26

我有一个在地图应用程序中使用SVG/VML（通过Raphael JS）设置的网站，其中SVG用于在背景地图图像上显示图形。这在屏幕上工作得很好，也适用于打印带有覆盖的硬拷贝地图。然而，当用户想要将带有SVG覆盖的地图图像保存到本地.JPG文件时，这种设置就失效了。

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

所以我的主要问题是；是否可以将图像和SVG元素组合（最好是客户端，尽管我对选项持开放态度）成一个"扁平"图像，.JPG、.PNG或其他图像，然后右键单击并保存，或根据请求下载到用户的PC？

您需要做的是，而不是覆盖JPG和SVG：

  • 拍摄原始图像
  • 在内存中的SVG文件上绘制线条
  • 将单个图像作为JPG输出到浏览器

这当然意味着您必须能够解释SVG。。。

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

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

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

由于安全限制（例如，我在Firefox中根本无法实现这一点），恐怕您在Canvas元素上渲染SVG时会遇到困难。

不过，这里有一个想法：

  1. 使用SVG <image>标记将图像放置在SVG DOM中
  2. 通过canvg库传递SVG代码
  3. 使用canvg的toDataURL方法生成图像
相关文章：