ユーザーのコンピュータからスタイル付きのキャンバスに画像を追加

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>