Question

我正在尝试使用相机将图像添加到我使用Phonegap和fabric.js构建的应用程序的画布上。

这很有用，因为它将图像添加到屏幕上。然后我设法将其保存到数据库中，然后可以重新显示它。

  function onPhotoURISuccessCanvas(imageURI){

  var canvas = new fabric.Canvas('cx0'); 
  canvas.setDimensions({width: 400, height: 600});

 fabric.Image.fromURL(imageURI, function(img) {
canvas.insertAt(img.set({ left: 400, top: 0, angle: 90, lockMovementX:true, lockMovementY: true,lockScaling: true, LockRotation:
true,selectable: false,isDrawingMode: true}).scale(0.25)),0; });


//this is the call to show the images
thisImage = serializeCanvasByIDx();

}

function serializeCanvasByIDx() {
    var canvas = document.getElementById('cx0');
    var serializedVal = 'data:,';
    if (canvas.toDataURL) serializedVal = canvas.toDataURL(); 
    return serializedVal;
    }

我现在希望能够启用自由绘图，以便我可以在图像上绘制草图

    function deviceReady() {

    var canvas = new fabric.Canvas('cx0');
    canvas.setDimensions({width: 400, height: 600});
    var mode = document.getElementById('drawing-mode');

    mode.onclick = function() {
    canvas.isDrawingMode = !canvas.isDrawingMode;
    if (canvas.isDrawingMode) {
        mode.innerHTML = 'Enter edit mode';
    }
    else {
        mode.innerHTML = 'Enter draw mode';
    }


 };

    canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);
    canvas.freeDrawingBrush.color = 'Black';
    canvas.freeDrawingBrush.width = 4;

}

绘图模式可以实现，但是一旦我绘制，我添加的图像消失了，我尝试了很多不同的技术，但无法看到我出错的地方。

所有想法都赞赏。感谢

添加图像后，在画布上自由绘制问题

0 个答案: