- ファブリックJS

Question

私は、ユーザーが背景画像を追加し、テキスト、図形などをこの段階で

、私が欲しいのオーバーレイした角度2ファブリックJSを使用してデザイナーを作成してい

（モーダルチェックアウト画面で）キャンバスを複製することができ、ユーザはデザインのサムネイルプレビューを、好ましくは画像として持つことができる。

これを可能にするファブリック機能が組み込まれていますか？または、他のプラグインが適していますか？に画像を表示したり、保存するためにdataURLを使用すると

var canvas = document.getElementById("canvas"); 
var dataURL = canvas.toDataURL(); 

：あなたは次の行にキャンバスのdataURLを得ることができますdocumentation here

-

Answer 1

あなたは、私がイメージに任意のSRCを提供していない見ることができるようにあなたがここ

var canvas = new fabric.Canvas('canvasContainer'); 
 
var rect = new fabric.Rect({ 
 
     left: 100, 
 
     top: 100, 
 
     fill: "#FF0000", 
 
     stroke: "black", 
 
     width: 100, 
 
     height: 100, 
 
     strokeWidth: 10, 
 
    }); 
 
    
 
    
 
    canvas.add(rect); 
 
     
 
canvas.renderAll(); 
 
var convertToImage=function(){ 
 
    canvas.deactivateAll().renderAll(); 
 
    document.getElementById("ten").src=canvas.toDataURL('png'); 
 
} 
 
convertToImage();

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<canvas width="400" height="400" id="canvasContainer"></canvas> 
 
<img id="ten" style="border:2px solid;"/>

を必要とするものです。代わりに関数convertToImageは画像のソースを設定します。 ここにはFiddle

Answer 2

だけHTMLCanvasElement.toDataURL（）を使用ファイルを開き、それを表示します。ここで