javascript - Merge SVG and .JPG into one image? - Stack Overflow

admin管理员组

文章数量:1022989

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 bine 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?

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 bine 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?

• javascript
• svg
• raphael

Share Improve this question Follow asked Mar 29, 2012 at 15:23 theDomtheDom 34911 gold badge44 silver badges77 bronze badges 4

• Do options include ImageMagick? imagemagick/script/magick-vector-graphics.php – PinnyM Commented Mar 29, 2012 at 15:27
• Possible duplicates: stackoverflow./questions/4086703/… stackoverflow./questions/3975499/… – JayC Commented Mar 29, 2012 at 15:37
• I am looking into the Imagick extension to PHP to possibly acplish what I'm trying to do. As for the possible duplicate threads, I've looked at both of those, and the reliance on Canvas and IE's lack thereof makes it a difficult fit for what is supposed to be a browser-agnostic app. That and both threads address only converting the SVG itself to a graphic, not the merging then of said SVG graphic and another one into a single image. – theDom Commented Mar 29, 2012 at 20:49
• you could dynamically include the jpg image into the vector canvas (as a vector shape), right before rendering it, thus avoiding the interpretation of different sources. – Eliran Malka Commented Mar 30, 2012 at 13:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 0

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...

One possibility would be to embed the image into the SVG, and then generate a Data URL with the bined 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./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.

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:

1. Place your image inside the SVG DOM using the svg <image> tag
2. Pass your SVG code through the canvg library
3. Use the toDataURL method of canvg to generate the image

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 bine 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?

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 bine 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?

• javascript
• svg
• raphael

Share Improve this question Follow asked Mar 29, 2012 at 15:23 theDomtheDom 34911 gold badge44 silver badges77 bronze badges 4

• Do options include ImageMagick? imagemagick/script/magick-vector-graphics.php – PinnyM Commented Mar 29, 2012 at 15:27
• Possible duplicates: stackoverflow./questions/4086703/… stackoverflow./questions/3975499/… – JayC Commented Mar 29, 2012 at 15:37
• I am looking into the Imagick extension to PHP to possibly acplish what I'm trying to do. As for the possible duplicate threads, I've looked at both of those, and the reliance on Canvas and IE's lack thereof makes it a difficult fit for what is supposed to be a browser-agnostic app. That and both threads address only converting the SVG itself to a graphic, not the merging then of said SVG graphic and another one into a single image. – theDom Commented Mar 29, 2012 at 20:49
• you could dynamically include the jpg image into the vector canvas (as a vector shape), right before rendering it, thus avoiding the interpretation of different sources. – Eliran Malka Commented Mar 30, 2012 at 13:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 0

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...

One possibility would be to embed the image into the SVG, and then generate a Data URL with the bined 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./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.

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:

1. Place your image inside the SVG DOM using the svg <image> tag
2. Pass your SVG code through the canvg library
3. Use the toDataURL method of canvg to generate the image

本文标签： javascriptMerge SVG and JPG into one imageStack Overflow