Question

    setTimeout(function () {
        var myImg = document.querySelector("#background");
        var realWidth = myImg.naturalWidth;
        var realHeight = myImg.naturalHeight;
        $("canvas").attr("width", realWidth);
        $("canvas").attr("height", realHeight);
        var source = document.getElementById('background').src;
        var canvas = new fabric.Canvas('canvas');
        canvas.width = realWidth;
        canvas.height = realHeight;
        var ctx = canvas.getContext('2d');
        
        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: 320
                        , top: 180
                        , angle: 00
                        , width: 200
                        , height: 200
                    });
                    canvas.add(oImg).renderAll();
                    var a = canvas.setActiveObject(oImg);
                    var dataURL = canvas.toDataURL({
                        format: 'png'
                        , quality: 0.8
                    });
                });
            };
            reader.readAsDataURL(file);
        });
        canvas.setOverlayImage(source, canvas.renderAll.bind(canvas), {
            backgroundImageOpacity: 0.5
            , backgroundImageStretch: false
        });
        canvas.on('mouse:over', function (e) {
            canvas.item(0).hasBorders = true;
            canvas.item(0).hasControls = true;
            canvas.setActiveObject(canvas.item(0));
        });
        canvas.on('mouse:out', function (e) {
            canvas.item(0).hasBorders = false;
            canvas.item(0).hasControls = false;
            canvas.setActiveObject(canvas.item(0));
        });
        canvas.renderAll();
    }, 2000);
    $("#save").click(function () {
        function blobCallback(iconName) {
            return function (b) {
                var a = document.getElementById('download');
                a.download = iconName + ".jpg";
                a.href = window.URL.createObjectURL(b);
            }
        }
        canvas.toBlob(blobCallback('wallpaper'), 'image/vnd.microsoft.jpg', '-moz-parse-options:format=bmp;bpp=32');
    });

.hide {
            display: none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cricmovie.com/bb-asserts/js/fabric.min.js"></script>
<body>
    <div class="container"> <img src="http://cricmovie.com/bb-asserts/images/person.png" id="background" class="hide">
        <input type="file" id="file">
        <br />
        <canvas id="canvas" class="img-responsive"></canvas>
    </div>
    <div class="container"> <a class="btn btn-primary" id="save">Save</a> <a class="btn btn-primary" id="download">Download</a> </div>
</body>

当我有两张图片时，我正在使用fabric js来构建一个facemask应用程序 1）使用setOverlayImage方法应用于画布的没有面部的图像 2）仅限用户上传的位置并相应调整。

我几乎完成了功能，但我想在第一个图像上方显示结构处理程序，现在它们隐藏在第一个图像后面。

参考图片：Click here for reference Image

请找到“运行代码段”

Answer 1

我认为您需要做的就是在获取结构实例时指定controlsAboveOverlay。

    var canvas = new fabric.Canvas('canvas', {
      controlsAboveOverlay : true
    });

如何为fabric js处理程序应用z-index

1 个答案: