Question

我正在尝试使用canvas.toDataURL();

从FabricJS画布创建图像

我有php代码从这个数据库中写入实际的图像文件。

此函数从画布创建base64数据uri。在正常分辨率下（测试到全高清），这会生成我设置的实际尺寸图像（50pxX50px）。但在4k分辨率下，它会生成双倍大小的图像。我尝试设置乘数，高度，宽度选项，但没有运气。

我创建了一个jsfiddle here

＆＃13;

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);

＆＃13;

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

＆＃13;

我已经控制了输出，以便您可以检查。

请帮助我。

Answer 1

您拥有高像素密度监视器，这就是您遇到此问题的原因。请阅读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 
});

FabricJs画布到dataurl图像大小问题

1 个答案: