fancy product designerの内容をdownload時SVG対応

 fancy product designerの内容をsvgとしてdownload際、画像のsrcがリンクの場合、リンク形式で保存され、AIで開くと参照ファイルがないため、表示できない。

fancy product designerが使うfabricjsのメソッドをoverwriteする必要ある。画像のsrcがbase64形式の場合そのまま、リンクの場合DataURLとして保存する

fabric.Image.prototype.getSvgSrc = function() {

   return this.toDataURLforSVG();

};

fabric.Image.prototype.toDataURLforSVG = function(options) {

   var src = this._element.src;

   var imageParts = src.split('.');

   //base64 encodedかどうか

   if(imageParts.length == 1) {

      return imageParts[0];

    }

    // base64ではない場合、リンクの場合、base64を返す

    var el = fabric.util.createCanvasElement();

        el.width  = this._element.naturalWidth || this._element.width;

        el.height = this._element.naturalHeight || this._element.height;

     el.getContext("2d").drawImage(this._element, 0, 0);

     var data = el.toDataURL(options);

     return data;

 };