javascript - 使用 Fabricjs 1.5.0 时 Canvas 中的图像模糊

Question

这就是我的代码在 cordova 应用程序中使用 Fabricjs 时的样子

function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
    capturePhoto();
    canvas = new fabric.Canvas('canvas', { width: window.innerWidth, height: window.innerWidth });
    canvas.renderAll();
    ctx=canvas.getContext("2d");
}

function onPhotoDataSuccess(imageData) {canvas.setBackgroundImage('data:image/jpeg;base64,'+imageData,canvas.renderAll.bind(canvas),{
originX: 'left',
originY: 'top'
  });
  }

 function capturePhoto() {
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 100,
    allowEdit : true,
    saveToPhotoAlbum: true, 
    correctOrientation: true,
    destinationType: destinationType.DATA_URL,
    cameraDirection: 0});

}

<canvas id="canvas" style="position:absolute; top:0px; left:0px;"></canvas>

但是，拍摄照片后， Canvas 窗口上的照片最终变得模糊。有谁知道为什么会发生这种情况吗？

附注使用fabricjs 1.6.0rc时，图像不再显得模糊，但1.5.0具有我需要的功能

Answer 1

为避免织物 1.5.0 的图像模糊，覆盖图像对象的标准描边宽度值:

fabric.Image.prototype.strokeWidth = 0;

你应该没问题。

在加载库之后、加载图像之前，在脚本中的任意位置添加这行代码。

如果在 devicePixelRation 不同于 1 的手机上工作，请尝试查看是否

canvas.enableRetinaScaling = true; // OR false 

有任何区别。