javascript - 为添加的图像设置均匀的阴影

Question

我正在使用 fabric.js 来处理添加到 Canvas 中的图像。我有一个影子，但我希望它在图像周围均匀。我现在拥有的是下面，但是here's what I'm trying to replicate with the images added .我做错了什么导致阴影不显示？

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) {

      //create shadow
      var shadow = {
        color: 'rgba(0,0,0,0.6)',
        blur: 20,
        offsetX: 0,
        offsetY: 0,
        opacity: 0.6,
        fillShadow: true,
        strokeShadow: true
      }

      var oImg = img.set({
        left: 0,
        top: 0,
        angle: 0,
        stroke: '#222',
        strokeWidth: 40
      }).scale(0.2);
      oImg.setShadow(shadow); //set shadow
      canvas.add(oImg).renderAll();
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 1
      });
    });
  };
  reader.readAsDataURL(file);
});

oImg.setShadow(shadow);

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 />
<br>
<canvas id="canvas" width="200" height="200"></canvas>

Answer 1

如果上传的图片是png，它会影响边框，其他的会影响边框，你可以使用affectStroke，它也会影响描边。这是 doc .

演示

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) {

      //create shadow
      var shadow = {
        color: 'rgba(0,0,0,0.6)',
        blur: 20,
        offsetX: 20,
        offsetY: 20,
        affectStroke: true
      }

      var oImg = img.set({
        left: 0,
        top: 0,
        stroke: 'black',
        strokeWidth: 10
      }).scale(0.2);
      oImg.setShadow(shadow); //set shadow
      canvas.add(oImg).renderAll();
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 1
      });
    });
  };
  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 />
<br>
<canvas id="canvas" width="400" height="400"></canvas>