将SVG和.JPG合并为一个图像？ [英] Merge SVG and .JPG into one image?
问题描述
我在地图应用程序中使用SVG / VML（通过Raphael JS）设置的网站，其中SVG用于在背景地图图像上显示图形。这在屏幕上非常有效，并且可以使用叠加打印硬拷贝地图。但是，当用户想要将具有SVG覆盖图的地图图像保存到本地.JPG文件时，此设置会分崩离析。
I have an website using SVG/VML (via Raphael JS) setup in a mapping application where the SVG is used to display graphics atop a backdrop map image. This works very well onscreen, and for printing hardcopy maps with overlays. Where this setup falls apart however is when the user wants to save the map image with the SVG overlay to a local .JPG file.
更具体地说，当SVG / VML元素位于顶部时，使用大多数浏览器的标准右键单击功能将图像另存为...不起作用图片。在地图上单击鼠标右键，用户可以保存地图图像，但不包含叠加层。右键单击重叠的SVG元素，用户获得的最佳功能是检查元素或保存一些HTML（因浏览器而异）。
More specifically, using the standard right-click functionality of most browsers to "Save image as..." does not work when there is an SVG/VML element sitting atop the image. Right-click on the map, and the user can save the map image, but without the overlay. Right-click on the overlaid SVG element, and the best the user gets is the ability to inspect the element or save out some HTML (it varies by browser).
所以我的主要问题是;是否可以拍摄图像和SVG元素并将它们（最好是客户端，虽然我可以选择）组合成一个扁平图像，.JPG，.PNG或其他，然后可以右键单击并根据要求保存或下载到用户的PC上？
So my main question here is; Is it possible to take an image and an SVG element and combine them (preferably client-side, though I'm open to options) into one "flattened" image, .JPG, .PNG or otherwise, that can then be right-clicked and saved, or downloaded to a user's PC upon request?
推荐答案
我担心你会很难尝试由于安全限制而在Canvas元素上渲染SVG（例如我根本无法在Firefox中使用它）。
I'm afraid you're gonna have a tough time attempting to render SVG on a Canvas element just like that due to security constraints (I could not get this working in Firefox at all for instance).
这是一个想法：
- Place your image inside the SVG DOM using the svg
<image>tag - Pass your SVG code through the canvg library
- Use the toDataURL method of canvg to generate the image
这篇关于将SVG和.JPG合并为一个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
