首页 文章

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

提问于
浏览 次
2

这是我在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>

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

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

javascript cordova canvas fabricjs

1 回答

  • 2

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

    fabric.Image.prototype.strokeWidth = 0;

    你应该没问题 .

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

    如果使用devicePixelRation与1不同的手机，请尝试查看是否

    canvas.enableRetinaScaling = true; // OR false

    有所作为 .

    回复于

相关问题