ズームとパンのキャンバスをJavaScriptのdataUrlに保存する方法

Question

背景画像を拡大/縮小してパンすることができるキャンバス要素を作成し、その上にアイコンを追加することでクリックできます。ファブリックjs上に構築されています。

アイコンを追加してズームしてパンすると、イメージをdataurlに保存します。私がcanvas.toDataURLを使うだけであれば、現在表示されている領域しか見ることができません。誰かがアイデアを持っていますか、どのようにキャンバス上のすべての要素を使って背景イメージの全領域を保存することができますか？したがって、ズームとパンをリセットし、キャンバスのサイズを背景画像のサイズに合わせる関数が必要です。

以下に私のキャンバスの初期化の例を示しました。

// New Fabric Canvas 
 
var canvas = new fabric.Canvas('c'); //render image to this canvas 
 

 
window.addEventListener('resize', resizeCanvas, false); 
 

 
    function resizeCanvas() { 
 
    canvas.setHeight(window.innerHeight); 
 
    canvas.setWidth(window.innerWidth); 
 
    canvas.renderAll(); 
 
    } 
 

 
    // resize on init 
 
    resizeCanvas(); 
 
     
 
// Load image 
 
var image = new Image(); 
 
    
 
    image.onload = function() { 
 
    loadImage(image, canvas); 
 
    canvas.height = image.height; 
 
    canvas.width = image.width; 
 
} 
 

 

 
function loadImage(image, canv) { 
 
    var img = new fabric.Image(image, { 
 
     selectable: false, 
 
     lockUniScaling: true, 
 
     centeredScaling: true, 
 
     alignX: "mid", 
 
     alignY: "mid", 
 
    }); 
 
    canv.add(img); 
 
    canv.centerObject(img); 
 
} 
 

 
image.src = 'http://placehold.it/350x150';

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="canvasarea" style="background: #000;"> 
 
     <canvas id='c' onclick="return false;"></canvas> 
 
    </div>

Answer 1

あなただけの画像を生成し、キャンバスのズームレベルを変更しないようにしたい場合は、toDataUrl関数に乗数パラメータを渡すことができます。

var dataURL = canvas.toDataURL({ 
    format: 'png', 
    multiplier: 2 
}); 

これは、拡大後に200％の画像を生成します。

あなたも、あなたが使用しての画像を生成する、キャンバスの一部を指定することができます。

var dataURL = canvas.toDataURL({ 
    format: 'png', 
    left: 100, 
    top: 100, 
    width: 200, 
    height: 200 
}); 

、ここtoDataUrl機能を詳細に確認してください： http://fabricjs.com/docs/fabric.Canvas.html