fancy product designerにおけるSVGファイルにlinearGradient情報なくなる対応

 linearGradient情報含まれるSVGファイルをfancy product designerに取り込むと、その情報がなくなった。原因はSVG各objectのfillを処理する際のバグ？か

ソースコードの6018行目あたり、objectのfillは、色のHexかtransparentとなるが、linearGradientの場合、fillがobjectになっている。

var color = objects[i].fill.length > 0 ? tinycolor(objects[i].fill).toHexString() : 'transparent';

params.colors.push(color);

対応するには、下記のように変更

if(typeof(objects[i].fill) !== "object") {

  var color = objects[i].fill.length > 0 ? tinycolor(objects[i].fill).toHexString() : 'transparent';

  params.colors.push(color);

} else {

  params.colors.push('');

}

さらに、6070行目あたり

//if no default colors are set, use the initial path colors

else if(!fabricParams.fill && !fabricParams.svgFill) {

  if(objects) {

    params.colors = [];

    for(var i=0; i < objects.length; ++i) {

      if(typeof(objects[i].fill) !== "object") {

        var color = objects[i].fill.length > 0 ? tinycolor(objects[i].fill).toHexString() : 'transparent';

params.colors.push(color);

      } else {

params.colors.push('');

      }

    }

    params.svgFill = params.colors;

  }

  fabricParams.svgFill = params.svgFill;

}

最後、7540行目あたり

//path groups (svg)

else if(element.type == FPDPathGroupName && typeof hex == 'object') {

  for(var i=0; i < hex.length; ++i) {

    if(element.getObjects()[i] && hex[i] !== '') {

      element.getObjects()[i].set('fill', hex[i]);

    }

  }

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;

 };

fancy product designerローカルSVG画像使用時正しく表示されない対応

fancy product designer(https://fancyproductdesigner.com/) jqueryバージョンの最新有料版を使っていますが、ローカルSVGをdesignerに入れると、正しく表示されない。

ソースには、ローカル画像をstageに入れる場合、FileReaderを使用する。

reader.readAsDataURL(file);

ここで、SVGでもDataURL形式で読み込まれる。

addElement functionで、読み込まれた結果をSVGかどうかの判断がありますが、DataURL形式のため、ただしく認識できない。

if(source.search('<svg') !== -1) 

解決するには、SVGから変換されたDataURL形式なら、もとのテキストファイルに戻す。

ソースコードの5937行の後に下記追加

if(source.search(/data:image\/svg\+xml;base64,/) >= 0) {

    source = atob(source.replace(/^data:image\/svg\+xml;base64,/, ''));

}