问题
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.
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).
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?
回答1:
What you need to do is, instead of overlaying JPG and SVG:
- Take the original image
- Draw the lines in the SVG file on it in memory
- Output that single image as a JPG to the browser.
This of course means that you have to be able to interpret SVG...
回答2:
One possibility would be to embed the image into the SVG, and then generate a Data URL with the combined images. The following example achieves this in png format:
var datauri = c.toDataURL('image/png');
where c is your formatted SVG layer. For more info, check out this open source editor, http://code.google.com/p/svg-edit/, in the svgcanvas.js and svg-editor.js files is a good example of how to export SVG as a png file. Its a little hard to understand at first, but very well written.
回答3:
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).
Here's an idea though:
- 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
来源：https://stackoverflow.com/questions/9928482/merge-svg-and-jpg-into-one-image