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

【问题标题】：Calling "toDataURL" on mobile returns an image 4x larger than on desktop在移动设备上调用“toDataURL”会返回比桌面设备大 4 倍的图像
【发布时间】：2016-12-08 02:46:22
【问题描述】：

所以我在一个小项目中使用 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...

【问题讨论】：

标签： canvas fabricjs

【解决方案1】：

很高兴发现这是一项功能而不是错误！ ;)

只需要禁用视网膜缩放：

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

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

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

【讨论】：