FabricJs画布dataurl图像尺寸问题

我试图用canvas.toDataURL();FabricJs画布dataurl图像尺寸问题

创建从FabricJS画布图像我有PHP代码从这个datauri写入实际的图像文件。

该函数从画布创建base64数据uri。在正常分辨率下（全高清测试），这会生成我设置的实际尺寸图像（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>

我安慰输出，使您可以检查。

请帮我这个。

来源

2017-02-16 Deepak Y Sapkal

你有高像素密度显示器，这就是为什么你有这个问题。在developer.mozilla.org上阅读this关于设备像素比率的简短主题。

您应该按照设备的像素比例来划分宽度和高度。

试试这个：

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

来源

2017-02-16 14:04:02 Observer

FabricJs画布dataurl图像尺寸问题

回答

相关问题