FabricJs холст к dataurl вопросу размера изображений

Question

Я пытаюсь создать изображение из FabricJS холста с помощью canvas.toDataURL();

У меня есть PHP код, который записывает сам файл изображения из этого datauri.

Эта функция создает uri данных base64 с холста. При нормальных разрешениях (проверенных до полного HD) это создает изображение фактического размера, которое я установил (50pxX50px). Но при разрешении 4k как-то он генерирует изображение с двойным размером. Я попробовал установить параметр множителя, высоты, ширины, но не повезло.

Я создал jsfiddle 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>

меня утешать выход, так что вы можете проверить.

Пожалуйста, помогите мне с этим.

Answer 1

У вас есть монитор с высокой плотностью пикселей, вот почему у вас есть эта проблема. Прочитайте this короткую тему на developer.mozilla.org о соотношении пикселей устройства.

Вы должны разделить ширину и высоту на соотношение пикселей устройства.

Попробуйте это:

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