fabric.js生成与canvas同尺寸图片移动端放大3倍问题求助

这个问题是高DPI（视网膜）屏幕下的默认缩放策略导致的，移动端设备的devicePixelRatio（设备像素比）通常为2或3，Fabric.js默认开启视网膜缩放适配，会将canvas的实际像素尺寸自动乘以设备像素比，因此导出的图片尺寸会按实际像素计算，比你设置的逻辑尺寸大对应倍数。
另外你当前代码存在基础错误：HTML中canvas的id为canvas，但初始化Fabric实例时传入的id是test-canvas，会导致实例初始化失败，需要先修正。

• 第一步：初始化Fabric Canvas时禁用视网膜缩放
  初始化配置里加enableRetinaScaling: false，关闭自动按设备像素比缩放的逻辑
• 第二步：修正toDataURL的参数配置
  你当前参数里指定的width和height为50，仅会导出左上角50x50的区域，要导出完整1000x1000的画布，不需要额外指定裁剪尺寸，保持multiplier: 1即可
• 第三步：如果使用响应式布局适配移动端，确保仅通过CSS修改canvas的显示尺寸，不要修改canvas元素本身的width和height属性值，这两个属性值要固定为你需要导出的1000px

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>

<canvas id="canvas" width="1000" height="1000"></canvas>

<script>
    // 初始化时禁用视网膜缩放
    var canvas = new fabric.Canvas('canvas', {
        enableRetinaScaling: false
    });
    var text = new fabric.Text('Hello World');
    canvas.add(text);
    canvas.setActiveObject(text);
    canvas.renderAll();
    // 导出时移除多余的裁剪参数，保持multiplier为1
    var image = canvas.toDataURL('png',{
        format: 'png',
        multiplier: 1
    });
</script>

内容的提问来源于stack exchange，提问作者Darshit Parmar