使用 fabric.js 在加载图像样式时添加框阴影

Question

. I'd like to also have a drop shadow on any images added to give them more of a "stacked" look. I've tried adding boxShadow: "5px 5px 20px 0px #888888", and taking queues from the documentation 但我运气不好。我将如何实现这一目标？ JS 中的样式对我来说还是全新的。任何帮助将不胜感激。提前致谢。

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: 0,
            border: '#000',
            stroke: '#F0F0F0',
            strokeWidth: 40
        }).scale(0.2);
        canvas.add(oImg).renderAll();
        //var a = canvas.setActiveObject(oImg);
        var dataURL = canvas.toDataURL({
            format: 'png',
            quality: 1
        });
    });
};
reader.readAsDataURL(file);
});

我尝试将我的所有代码插入片段插入器，但出于某种原因它不想运行插入其中。我认为以上是适用的。

Answer 1

您可以像这样简单地创建一个阴影对象...

var shadow = {
    color: '#888888',
    blur: 70,
    offsetX: 45,
    offsetY: 45,
    opacity: 0.8
}

然后，将其设置为图像对象，就像这样...

oImg.setShadow(shadow);

ᴅᴇᴍᴏ

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: '#888888',
                blur: 70,
                offsetX: 45,
                offsetY: 45,
                opacity: 0.8
            }
           
           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);
});

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>

使用 fabric.js 在加载图像样式时添加框阴影

Add box-shadow to image styling on load with fabric.js

html

javascript

css

fabricjs