FabricJs Leinwand zu DataURL Bildgröße Ausgabe

Question

Ich versuche Bild zu erstellen aus FabricJS Leinwand canvas.toDataURL();

Ich habe PHP-Code verwenden, die aus diesem datauri eigentlicher Bilddatei schreibt.

Diese Funktion erstellt base64-Daten uri aus der Zeichenfläche. Bei normalen Auflösungen (getestet bis Full HD) erzeugt dies ein Bild in der tatsächlichen Größe, das ich eingestellt habe (50pxX50px). Aber bei 4k Auflösung erzeugt es irgendwie ein doppeltes Bild. Ich habe versucht, Multiplikator, Höhe, Breite Option, aber kein Glück.

Ich habe eine jsfiddle erstellt here

var canvas = new fabric.Canvas('myCanvas'); 
 
canvas.setHeight(50); 
 
canvas.setWidth(50); 
 
canvas.setBackgroundColor('rgb(59,173,160)'); 
 
// create a rectangle object 
 
var rect = new fabric.Rect({ 
 
    left: 0, 
 
    top: 0, 
 
    fill: 'blue', 
 
    width: 20, 
 
    height: 20 
 
}); 
 
// "add" rectangle onto canvas 
 
canvas.add(rect); 
 
var img = canvas.toDataURL({ 
 
    format: 'png', 
 
    multiplier: 1, 
 
    left: 0, 
 
    top: 0, 
 
    width: 50, 
 
    height: 50 
 
}); 
 
console.log(img);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script> 
 
<canvas id="myCanvas" style="border: 2px solid red;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
</canvas>

Ich tröste haben den Ausgang, so dass Sie überprüfen können.

Bitte helfen Sie mir dabei.

Answer 1

Sie haben einen hohen Pixeldichte-Monitor, deshalb haben Sie dieses Problem. Lesen Sie this kurzes Thema auf developer.mozilla.org über Device Pixel Ratio.

Sie sollten Breite und Höhe durch das Pixelverhältnis des Geräts teilen.

Versuchen Sie folgendes:

var ratio = window.devicePixelRatio; 
var img = canvas.toDataURL(
{ 
    format: 'png', 
    multiplier: 1, 
    left: 0, 
    top: 0, 
    width: 50/ratio , 
    height: 50/ratio 
});