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>

然而，在拍摄照片后，照片最终在画布窗口上变得模糊。有没有人知道为什么会这样？

P.S。当使用fabricjs 1.6.0rc时，图像不再模糊，但1.5.0具有我需要的功能

Answer 1

以避免织物图像的模糊1.5.0覆盖图像对象的标准strokeWidth值：

fabric.Image.prototype.strokeWidth = 0;

你应该没事。

在加载库之后和加载图像之前，在脚本中的任何位置添加此行代码。

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

canvas.enableRetinaScaling = true; // OR false

有所不同。

使用fabricjs 1.5.0时画布中的模糊图像

1 个答案: