fabricjs - 使用 Fabricjs 进行设计

Question

https://jsfiddle.net/prashantbw/j85yot0g/32/

var __global = {};
__global.canvas = new fabric.Canvas('canvasArea', { preserveObjectStacking: true });
__global.activeObject = {};
__global.editAreaObject = null;
__global.backAreaObject = null;

var myAppModule = (function () {
    var outObj = {};

    var file, fileReader, img;
    var cImg;

    var init = function (newFile, newFileReader) {
        file = newFile;
        fileReader = newFileReader;
    };

    var onloadImage = function () {
        cImg = new fabric.Image(img, {
            top:  0,
            left:  0,
            angle: 0,
            objType: "image",
            objectCaching: false,
        });
       /*  var filter = new fabric.Image.filters.BlendImage({
         image: cImg,
         mode: 'mask',
        });
        var obj = null;
              $.each(__global.canvas.getObjects(), function (key, value) {
                if(value.objType == "b_image"){
                    obj = value;
                    return false; // breaks
                }
        
            });
        console.log(obj)
        obj.filters.push(filter);
        obj.applyFilters(); */
          __global.canvas.add(cImg).sendToBack(cImg);
         __global.canvas.renderAll();
        
       /*  cImg.scaleToWidth(__global.editAreaObject.width * __global.editAreaObject.scaleX);
        
        cImg.clipPath = __global.backAreaObject; */
      
        
    };

    var onloadFile = function (e) {
        img = new Image();
        img.onload = onloadImage;
        img.src = fileReader.result;
    };

    outObj.init = init;
    outObj.OnloadFile = onloadFile;

    return outObj;
})();

$(document).ready(function () {
   
        
        fabric.Image.fromURL('https://i.imgur.com/KRrXAPO.png', function (myImg) {
            var img = myImg.set({
                left: 0,
                top: 0,
                angle: 0,
                objType: "b_image",
                scaleX: 450 / myImg.width,
                scaleY: 500 / myImg.height,
                "selectable": false,
                "evented": false,
            });
            __global.canvas.centerObject(img);
            __global.canvas.add(img);
        });
    

   

    $('.add-image').click(function () {
        $('.file-selector').trigger('click');
    });

    $('.file-selector').change(function (evt) {
        var files = evt.target.files;
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            myAppModule.init(f, reader);
            reader.onload = myAppModule.OnloadFile;
            reader.readAsDataURL(f);
        }
    });

   
});

.file-selector{
 display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="add-image">
Add Image
</button>
<div>
<canvas id="canvasArea" width="800px" height="600px"></canvas>
<input type="file" class="file-selector" name="file-selector" value=""
                accept=".png, .jpg, .jpeg, .svg" />
</div>

我正在尝试实现如图所示的目标。目前我正在使用带点的多边形来选择面罩的区域和剪辑路径，但这对用户来说不是一种有效的方式，因为他们需要选择区域。所以我想知道这是否可以通过透明图像来实现？

标签： fabricjs