6

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?

theDom
  • 339
  • 1
  • 4
  • 7
  • Do options include ImageMagick? http://www.imagemagick.org/script/magick-vector-graphics.php – PinnyM Mar 29 '12 at 15:27
  • Possible duplicates: http://stackoverflow.com/questions/4086703/convert-raphael-svg-to-image-png-etc-client-side http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser/3976034#3976034 – JayC Mar 29 '12 at 15:37
  • I am looking into the Imagick extension to PHP to possibly accomplish 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 Mar 29 '12 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 Mar 30 '12 at 13:05

3 Answers3

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

Roy Dictus
  • 32,551
  • 8
  • 60
  • 76
  • Ok... is this possible using standard client-side JavaScript, or something else on the server? I'm not sure exactly what you mean by drawing the lines on the image "in memory" – theDom Mar 29 '12 at 16:09
  • The drawing is then not done in the browser (as it would with JavaScript), but on the server in the process that handles the request. – Roy Dictus Mar 30 '12 at 05:53
0

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.

RestingRobot
  • 2,938
  • 1
  • 23
  • 36
0

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
Emil
  • 714
  • 1
  • 5
  • 10