從上傳的圖像中刪除畫布html5中的拖動屬性（設置上傳圖像的區域）

Question

我正在使用fabric js在畫布上上傳圖像。現在它是一個可拖動的，但我想刪除拖動屬性，並設置區域上傳到畫布上的圖像。

HTML：

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
     <canvas id="canvas" width="750" height="550"></canvas> 
     <input type="file" id="file"> 

CSS：

canvas{ 
       border: 1px solid black; 
      } 

JAVA SCRIPT：

var canvas = new fabric.Canvas('canvas'); 
      document.getElementById('file').addEventListener("change", function (e) { 
       var file = e.target.files[0]; 
       var reader = new FileReader(); 
       reader.onload = function (f) { 
        var data = f.target.result; 
        fabric.Image.fromURL(data, function (img) { 
         var oImg = img.set({left: 50, top: 100,width: 250, height: 200, angle: 00}).scale(0.9); 
         canvas.add(oImg).renderAll(); 
         var a = canvas.setActiveObject(oImg); 
        }); 

       }; 
       reader.readAsDataURL(file); 
       var dataURL = canvas.toDataURL({ 
        format: 'png', 
        opacity: 0.9 
       }); 

      }); 

 
    
 
var canvas = new fabric.Canvas('canvas'); 
 
      document.getElementById('file').addEventListener("change", function (e) { 
 
       var file = e.target.files[0]; 
 
       var reader = new FileReader(); 
 
       reader.onload = function (f) { 
 
        var data = f.target.result; 
 
        fabric.Image.fromURL(data, function (img) { 
 
         var oImg = img.set({left: 50, top: 100,width:200,height:200, angle: 00}).scale(0.9); 
 
         canvas.add(oImg).renderAll(); 
 
         var a = canvas.setActiveObject(oImg); 
 
        }); 
 

 
       }; 
 
       reader.readAsDataURL(file); 
 
       var dataURL = canvas.toDataURL({ 
 
        format: 'png', 
 
        opacity: 0.9 
 
       }); 
 
       console.log("Canvas Image " + dataURL); 
 
      });

canvas{ 
 
       border: 1px solid black; 
 
      }

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
     <canvas id="canvas" width="750" height="550"></canvas> 
 
     <input type="file" id="file">

我想只刪除上傳圖片的拖動屬性。

Answer 1

只是

.lockMovementX = true; 
.lockMovementY = true; 

var canvas = new fabric.Canvas('canvas'); 
 
      document.getElementById('file').addEventListener("change", function (e) { 
 
       var file = e.target.files[0]; 
 
       var reader = new FileReader(); 
 
       reader.onload = function (f) { 
 
        var data = f.target.result; 
 
        fabric.Image.fromURL(data, function (img) { 
 
         var oImg = img.set({left: 50, top: 100,width:200,height:200, angle: 00}).scale(0.9); 
 
         oImg.lockMovementX = true; 
 
         oImg.lockMovementY = true; 
 
         canvas.add(oImg); 
 
         var a = canvas.setActiveObject(oImg); 
 
        }); 
 

 
       }; 
 
       reader.readAsDataURL(file); 
 
       var dataURL = canvas.toDataURL({ 
 
        format: 'png', 
 
        opacity: 0.9 
 
       }); 
 
       console.log("Canvas Image " + dataURL); 
 
      });

canvas{ 
 
       border: 1px solid black; 
 
      }

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
     <canvas id="canvas" width="750" height="550"></canvas> 
 
     <input type="file" id="file">