Add image from user computer to canvas with style

Question

I'm playing a lot with fabric.js. I read here how to add my own images. How would I do this but give each uploaded photo a certain style? In other words, I'd like each picture uploaded to have a border or stroke to look like this:

.

The code I'm playing with:

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

You would have to set stroke and strokeWidth property for the image object to accomplish that ...

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>