2013-08-21 10 views
6

イメージオブジェクトを持つjsonオブジェクトをロードしようとしています。画像オブジェクトは、背景として基本64画像データを有する。しかし、私はloadFromJSONメソッドを使用できません。Base64の画像データがファブリックのloadfromJSONで動作しない

コード:

var jsonDataSet = '{"objects":[{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":700,"height":600,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":false,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"src":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAn4AAAFPCAYAAADTHsP1AAAgAElEQ…Lv/vuU1wVsyvXK+Kks1f6gffSCThZ1km3u6NFklCnFes//AbZzi+iGF3/7AAAAAElFTkSuQmCC","filters":[]}],"background":""}'; 

canvas.loadFromJSON (jsonDataSet); 

canvas.renderAll(); 

それはあなたが最新fabric.jsのバージョンを使用する場合、それはバグだ"Error loading data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAn4AAAFPCAYAAADTHsP1AAAgAElEQ…Lv/vuU1wVsyvXK+Kks1f6gffSCThZ1km3u6NFklCnFes//AbZzi+iGF3/7AAAAAElFTkSuQmCC "

答えて

4

などのエラーが表示されます。私はプルリクエスト#800:https://github.com/kangax/fabric.js/pull/800でそれを修正しました。

あなたの上記のコードのあなたのbase64 dataURLは正しくありません - 3つのドット(lEQ ... Lv/vuU)があります。 おそらくコピーによる副作用です。

+1

ありがとうございました。あなたの変更を追加し、期待どおりに動作しています。 – user2571818

+0

3つのドットはコピーの副作用ではなく、実際にはfabric.jsによって追加されます。コンソールの出力を見てください:http://jsfiddle.net/h9q6Lorg/ – BruceHill

+2

これはfabric.jsによって追加されません。これはChromeのdevtools(https://code.google.com/p/chromium/issues/detail?id=464560)のconsole.logのバグ/制限です。 http://jsfiddle.net/devxyrro/ – Kienz

関連する問題