RaphaelJS в SVG для

Question

Я пытаюсь позволить пользователю загружать SVG-графику в формате PNG.Вы можете получить код через JSFIDDLE

Часть SVG для CANVAS не работает.

Уже добавленные коды canvg и Mozillas ни один из них не работает.Также добавлен Canvas2Image, который должен работать, если в canvas есть элемент.

Answer 1

Благодаря gabelerner, который разработал canvg, помог мне исправить это

1. на основе Проблема сохранения в формате png SVG, сгенерированного Raphael JS на холсте , убрать все пробелы между тегами в svg
2. на основе Проблема с сохранением в формате png SVG, сгенерированного Raphael JS на холсте Href изображения изменен как xlink: href
3. на основе gabelerner, добавлено xmlns: xlink = "http://www.w3.org/1999/xlink" в svg xlmns
4. на основе Габелернер, изображение должно быть в том же домене - без пересечения
5. на основе gabelerner, Canvas2Image не может работать в кадре, что означает отсутствие FIDDLE (поэтому я удалил часть FIDDLE, чтобы прояснить это)

Вот пример SVG и JS части, которую вы, возможно, захотите получить

var svg_XML_NoSpace = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="768"><desc>Created with Raphaël</desc><defs></defs><image x="0" y="0" width="1024" height="768" preserveaspectratio="none" xlink:href="http://<mydomain>/<myfolder>/<myfile>"></image><path fill="none" stroke="#ff0000" d="M414,114L722,114" style="stroke-width: 3px;" stroke-width="3"></path></svg>'; //based on gabelerner

//add canvas into body        
var canvasID = "myCanvas";
var canvas = document.createElement('canvas');
canvas.id = canvasID;
document.body.appendChild(canvas);

//convert svg to canvas
canvg(document.getElementById(canvasID), svg_XML_NoSpace, { 
    ignoreMouse: true, ignoreAnimation: true, 
    renderCallback: function () {
         //save canvas as image
         Canvas2Image.saveAsPNG(document.getElementById(canvasID));  
         }
} );

Answer 2

Попробуйте преобразовать SVG в canvas с помощью fabric.js (вот демоверсия , в которой svg преобразуется в canvas в режиме реального времени, когда вы нажимаете кнопку на боковой панели).

Fabric не поддерживает все функции SVG, но она должна работать в простых случаях.

Вот пример использования loadSVGFromURL.

1) Вам потребуется элемент :

<canvas id="my-canvas"></canvas>

2) Инициализировать fabric.Element из холста:

var canvas = new fabric.Element('my-canvas');

3) Извлечь SVG через XHR:

canvas.loadSVGFromURL('path_to_your_shape.svg', function(objects, options) {

  // `objects` is now an array of fabric objects representing 
  // svg shapes from the document
  // if it's one shape, we'll just work with that
  // if it's more than one — we'll create a unified group out of it, 
  // using `fabric.PathGroup`

  var loadedObject = objects.length > 1 
    ? new fabric.PathGroup(objects, options) 
    : objects[0];

  // we can now change object's properties like left, top, angle, opacity, etc.
  // this is not necessary, of course

  loadedObject.set({
    left: 123,
    top: 321,
    angle: 55,
    opacity: 0.3
  });

  // and add it to canvas

  canvas.add(loadedObject);
});