Как сохранить html5 canvas/svg в png на javascript

Question

[Arion]

Есть 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";
};

или 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>

как сохранить один из этих вариантов в png используя javascript.

Обратите внимание, что картинка подгружается с другого домена. В случае с Canvas метод toDataUrl выдает «security error».

Comments

[Arion]

Генерирую svg, добавляю на страницу элемент canvas, потом делаю с помощью canvg:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

в итоге снова получаю «security error»

[eQ1]

< img crossorigin="anonymous" src="some.url" / > // html
или
img.setAttribute('crossOrigin', 'anonymous'); // js
Поможет избавиться от «security error»

Answer 1

[yui_room9]

Есть несколько вариантов

Canvas
1) Использовать proxy для изображения, тогда оно будет с вашего сервера
2) Взять изображение, попиксельно перерисовать на Canvas, сделать toDataURL

SVG
1) Здесь библиотека перерисовывает SVG на Canvas http://code.google.com/p/canvg/, а с Canvas уже toDataURL

Comments

[Arion]

а можно чуть подробнее по поводу второго варианта для Canvas? Может есть небольшой пример и как это отразиться на загруске, если изображение будет скажем 1000х1000 пикселей?

[Arion]

и мне кажеться, но вроде если воспользоваться canvg то в итоге столкнешься с той же проблемой security error

[yui_room9]

Извиняюсь 2ой вариант не работает, при взятии пиксельных данных тоже выдаёт security exception
По поводу canvg, нет security exception быть не должно, там рендер на основе SVG в Canvas, то есть изображение не берётся а строится.

[Arion]

canvg тоже не помогает, подробности в уточнение к вопросу

Answer 2

[Павло Пономаренко]

Я сомневаюсь, что вы сможете обмануть политику безопасности браузера.