Question

所以我在一个小项目中使用fabric，它也需要在移动设备上使用。

我的画布是500x500像素，当我在桌面上调用“toDataURL”时它工作正常。然而，当我在手机上测试时，我得到一个2000x2000像素的图像作为回应。这是一个孤立的例子：

var canvas = new fabric.Canvas('canvas');

canvas.setDimensions({
    width: 500,
    height: 500
});

setTimeout(function() {
    var data = canvas.toDataURL('png');
    var image = new Image();
    image.onload = function() {
        alert(image.width);
    };
    image.src = data;
}, 3000);

https://jsfiddle.net/ycsp5gfx/

3秒后，会弹出一条带有图像尺寸的信息。在桌面上的Chrome / Firefox上，我总是得到500（这是正确的）。在移动设备上的Chrome / Firefox（三星Galaxy S7 Edge）上，出于某种原因我总是拿到2000。

我做错了什么？我怎样才能使移动设备正常运行？

编辑：我在iPhone 6的Safari上测试过，我得到1000 ...

Answer 1

很高兴发现这是一个功能，而不是一个错误！ ;）

只需要禁用视网膜缩放：

canvas = new fabric.Canvas('canvas', { enableRetinaScaling: false });

或者，您可以将设备/像素比率设置为1。以下是它在结构源中的设置方式：

fabric.devicePixelRatio = window.devicePixelRatio || 
                          window.webkitDevicePixelRatio || 
                          window.mozDevicePixelRatio || 
                          1;

在移动设备上调用“toDataURL”会返回比桌面大4倍的图像

1 个答案: