モバイルで "toDataURL"を呼び出すと、デスクトップより4倍大きい画像が返されます

Question

私はファブリックを小さなプロジェクトに使用しており、モバイルでも使用できる必要があります。

私のキャンバスは500x500ピクセルです。デスクトップ上で "toDataURL"を呼び出すとうまくいきます。しかし、私がモバイルでテストすると、私は2000x2000ピクセルのイメージを取得しています。 3秒後

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/

は、メッセージは画像の寸法にポップアップする必要があります。ここで、単離された例です。デスクトップ上のChrome/Firefoxでは、いつも500（正しい）が得られます。 Chrome/Firefox on Mobile（Samsung Galaxy S7 Edge）では何らかの理由で常に2000を取得しています。

私は間違っていますか？モバイルを正常に動作させるにはどうすればよいですか？

EDIT：私はiPhone 6のSafariでテストされ、そこに私はこれが機能していないバグで発見するので、喜んで1000年...

Answer 1

を入手！ ;）

ただ、網膜のスケーリングを無効にするために必要な：

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

また、あなたが1にデバイス/ピクセル比を設定することができます。ファブリックソースに設定されている方法は次のとおりです。

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