Bitmap Self contained

[wallynm]

There is a way to have a bitmap on SVG selcontained as showed on this page? http://dev.w3.org/SVG/profiles/1.1F2/test/svg/struct-image-04-t.svg

If you look at the source, it have all the image bits inside the tag image, and if you save it on your desktop, the bitmap will be contained inside the SVG.

I need this because i want to export it to PNG and if the image is loaded from a http call it isn't rendered on the conversion...

[iamdustan]

Hey @wallysson. I’ll let the other bonsai guys chime in if they disagree, but I don’t think that this belongs in core or as default since it’s use is very specific to the svg renderer and use-case.

That said, you could do this pretty simply on your own. Something like this chicken scratch should get you started.

function getBase64(imageNode) {
  var img = new Image(), c = document.createElement('canvas'), ctx = c.getContext('2d');

  img.onload = onload;
  img.src = imageNode.getAttribute('src');

  c.height = img.height;
  c.width = img.width;
  ctx.drawImage(img, 0,0);
  return ctx.toDataURL('image/png');
}

function onBeforeSave(svgNode) {
  var images = svgNode.querySelectorAll('images');
  var i = images.length;
  while (i--) {
    images[i].setAttribute('src', getBase64(images[i]));
  }
}

[wallynm]

I will try to use it to convert the images to their base64 data, thank you by trying to help me... :) The reason that i'm needing this it's because i need to convert the SVG mounted by BonsaiJS to PNG... I've tried to make it several times, tried to use canvg (http://code.google.com/p/canvg/) to convert SVG into canvas them send the data to the backend buut didn't worked...

Maybe you knew some way to convert the SVG to PNG or even, the entire SVG to base64... (and sorry by asking here, i don't have another way to get help...)

[iamdustan]

Ah. I see. So you don’t just want the images loaded into your drawing context to be base64, you want the entire svg to become base64. Hmm...

How much control do you have over the server? Have you thought of just sending the entire svg document to the server and doing the conversion there?

Also, you can try this: http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#svg_to_canvas Caveat: it appears to not work in IE9.