0

Possible Duplicate:
Convert SVG to image (JPEG, PNG, etc.) in the browser

I am developing a card game using Kinetic.js and at the moment I am exploring the opportunity to do allow both "windowed" and full-screen modes for the game. If users chooses to play in fullscreen mode, JS should be able to generate (or load) bigger images for the cards.

It would be best to just load SVG images at start and then generate rasterized images of required size on the client's computer. Is it doable using just JavaScript?

Community
  • 1
  • 1
Denis Kulagin
  • 8,472
  • 17
  • 60
  • 129
  • 1
    Why do you want to rasterize the images? SVG scales almost perfectly by itself! – Sirko Dec 06 '12 at 09:24
  • Kinetic.js doesn't support SVG. Unfortunatelly(( – Denis Kulagin Dec 06 '12 at 09:31
  • you can convert the svg string to base 64 and set it as source of an what you can draw on the canvas. But than you cannot modify the pixel data anymore. – philipp Dec 06 '12 at 10:49
  • Thanks for suggestion. Tried it and it sucks from the performance point of view. Will think of server solution with a few precomputed sized for each card image. – Denis Kulagin Dec 06 '12 at 11:24

2 Answers2

1

You can't do it in Pure Javascript. You need to send your SVG image to a server, transform it with http://www.imagemagick.org/script/index.php for example and send it back to the client.

You can print your screen by looking at http://phantomjs.org/ but only in webkit browser.

Farandole
  • 539
  • 2
  • 8
  • 23
  • You can, http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/ - Works perfectly! [On the link page, sourceSVG = $("#your_svg_elem_name").get(0) ] – Vijay Singh Apr 24 '16 at 17:46
1

As Sirko stated, if you are already working with SVGs, as you seem to imply, you could just change sizes of these SVGs. That's part of what they are for.

Doesn't matter if kinetic doesn't provide methods for this, just use plain javascript: yourSVGelement.setAttribute('width',yourNewWidthValue);

And the same for height respectively.

bouscher
  • 1,300
  • 1
  • 9
  • 18