從用戶計算機添加圖片風格

Question

我打了很多與fabric.js到畫布上。我讀here如何添加我自己的圖像。我如何做到這一點，但給每個上傳的照片一定的風格？換句話說，我想上傳到具有邊框或中風看起來像這樣每張圖片：

。

我擺弄代碼：

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: 0, 
 
     top: 0, 
 
     angle: 00, 
 
     width: 100, 
 
     height: 100 
 
     }).scale(0.9); 
 
     canvas.add(oImg).renderAll(); 
 
     var a = canvas.setActiveObject(oImg); 
 
     var dataURL = canvas.toDataURL({ 
 
     format: 'png', 
 
     quality: 0.8 
 
     }); 
 
    }); 
 
    }; 
 
    reader.readAsDataURL(file); 
 
});

canvas { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<input type="file" id="file"><br /> 
 
<canvas id="canvas" width="450" height="450"></canvas>

Answer 1

你將不得不設置stroke和strokeWidth屬性爲圖像對象來實現這一目標？

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: 40, 
 
       top: 40, 
 
       angle: 00, 
 
       width: 100, 
 
       height: 100, 
 
       stroke: '#07C', //<-- set this 
 
       strokeWidth: 5 //<-- set this 
 
      }).scale(0.9); 
 
      canvas.add(oImg).renderAll(); 
 
      var a = canvas.setActiveObject(oImg); 
 
      var dataURL = canvas.toDataURL({ 
 
       format: 'png', 
 
       quality: 0.8 
 
      }); 
 
     }); 
 
    }; 
 
    reader.readAsDataURL(file); 
 
});

canvas {border: 1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<input type="file" id="file"><br /> 
 
<canvas id="canvas" width="180" height="180"></canvas>