So speichern Sie Zoomed und Panted Canvas zu DataUrl in Javascript

Question

Ich baue ein Canvas-Element, in dem Sie ein Hintergrundbild zoomen und schwenken können und per Klick können Sie Symbole hinzufügen. Es ist auf Stoff js gebaut.

Also sobald ich Symbole hinzugefügt und gezoomt und geschwenkt habe, möchte ich das Bild in Dataurl speichern. Wenn ich nur canvas.toDataURL verwende, kann ich nur den aktuell angezeigten Bereich sehen. Hat jemand eine Idee, wie ich den gesamten Bereich des Hintergrundbildes mit allen Elementen auf der Leinwand speichern kann? Ich brauche daher eine Funktion, die den Zoom und den Schwenk zurückstellt und die Größe der Leinwand an die Größe des Hintergrundbildes anpasst.

Ich habe ein Beispiel wie meine Leinwand unten initialisiert.

// 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

Wenn Sie nur ein Bild erzeugen und nicht die Zoomstufe der Leinwand ändern, können Sie Multiplikator Parameter toDataURL Funktion übergeben.

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

Dies erzeugt ein Bild nach dem Zoomen in 200%.

Sie können sogar den Teil der Leinwand geben, möchten Sie, indem Sie ein Bild erzeugen:

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

Überprüfen Sie die Details hier toDataURL Funktion: http://fabricjs.com/docs/fabric.Canvas.html