使用样式将用户计算机中的图像添加到画布

Question

我在使用fabric.js玩很多东西。我读了here如何添加自己的图片。我该如何做，但每张上传的照片都有一定的风格？换句话说，我希望上传的每张图片的边框或笔划看起来像这样：

。

我正在玩的代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1860 256">
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <g transform="translate(200,35)">
        <rect x="1" y="1" width="118" height="178" fill="#000"/>
        <path fill="white" d="M0.1,0h119.8v180H0.1V0 M3.2,33.2c0,13.8,0,27.7,0,41.5C18.6,75.1,33.9,80.4,46,90c-0.1-5.1,0-10.2-0.1-15.3
				c16.3-0.2,32.7,5,45.6,15c12.2,9.5,22,22.9,25.4,38.1c-0.4-31.5,0-63-0.2-94.5C78.9,33.2,41.1,33.2,3.2,33.2 M3.6,77.9
				c0,23,0,45.9,0,68.9c14.1,0,28.3,0,42.4,0c0-17.6,0-35.1,0-52.7C34.2,84,18.9,78.4,3.6,77.9 M49,78c0.1,4.8,0,9.5,0,14.2
				c15.5,13.6,25.1,33.8,25,54.5c14.1,0,28.3,0,42.4,0c0.5-17.7-7.1-35.2-19.3-47.8C84.7,86.1,67,78.2,49,78 M49.1,96.6
				c0.1,16.7,0,33.4,0,50.2c7.3,0,14.6,0,21.8,0C70.9,128,62.6,109.6,49.1,96.6z"/>
      </g>
    </mask>
    <filter id="shadow">
      <feOffset in="SourceAlpha" dx="10" dy="10" result="offset" />
      <feColorMatrix in="offset" type="matrix" values="0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0" result="greyoff" />
      <feGaussianBlur in="greyoff" stdDeviation="7" result="blur" />
      <feBlend in="SourceGraphic" in2="blur" mode="normal" />
    </filter>
  </defs>

  <g filter="url(#shadow)">
    <rect x="15" y="15" width="1800" height="220" fill="white" mask="url(#hole)"/>
  </g>
</svg>

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;
}