How to save html5 canvas/svg to png on javascript

Question

JavaScript

There is canvas:

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var destX = 69;
    var destY = 50;
 
    var imageObj = new Image();
    imageObj.onload = function(){
        context.drawImage(imageObj, destX, destY);
    };
    imageObj.src = "http://otherdomain.ru/example.jpg";
};

or svg:

<svg version="1.1" width="1042" height="594" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="2" y="2" width="50" height="50" xlink:href="http://otherdomain.ru/example.jpg">
  </image>
</svg>

how to save one of these options to png using javascript.

Please note that the image is loaded from another domain. In the case of Canvas, the toDataUrl method throws a "security error".

Answer 1

There are several options for
Canvas
1) Use a proxy for the image, then it will be from your server
2) Take the image, redraw it pixel by pixel on the Canvas, do the toDataURL
SVG
1) Here the library redraws the SVG on the Canvas http://code.google.com/p/ canvg/ , and with Canvas already toDataURL

Answer 2

I doubt you can fool the browser's security policy.