Question

我们正在使用JSON提取2张图片-蒙版图片和汽车

由于某些原因，我在小提琴中的以下函数中更改了一些代码：

container.scaleMask [ container.drawMask ]
function renderInnerImage [ container.drawImage ]
container.loadImage
container.loadMaskImage

问题：

现在未显示汽车图像： https://jsfiddle.net/m0pfoa5L/1/

这是CodePen：https://codepen.io/kidsdial/pen/RmBxZz

下面是代码段：

var target;
        const imageUrl = "https://i.imgur.com/RzEm1WK.png";

        let jsonData = {
            "layers": [{
                "x": 0,
                "height": 612,
                "layers": [{
                    "x": 160,
                    "src": "ax0HVTs.png",
                    "y": 91,
                    "height": 296,
                    "width": 429,
                    "name": "mask_1"
                }, {
                    "x": 25,
                    "src": "iEA642D.jpg",
                    "height": 324,
                    "width": 471,
                    "y": 22,
                    "name": "car"
                }],
                "y": 0,
                "width": 612
            }]
        };

        const containerElement = $('#container');
        const fileUp = $('#fileup');
        let mask;

        $(function() {

            // Upload image onclick mask image 

            containerElement.click(function(e) {
                var res = e.target;
                target = res.id;
                if (e.target.getContext) {
                    // click only inside Non Transparent part 
                    var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
                    if (pixel[3] === 255) {
                        setTimeout(() => {
                            $('#fileup').click();
                        }, 20);
                    }
                }
            });

            // Fetch mask images from json file - IGNORE this code 

            function getAllSrc(layers) {
                let arr = [];
                layers.forEach(layer => {
                    if (layer.src) {
                        arr.push({
                            src: layer.src,
                            x: layer.x,
                            y: layer.y,
                            height: layer.height,
                            width: layer.width,
                            name: layer.name
                        });
                    } else if (layer.layers) {
                        let newArr = getAllSrc(layer.layers);
                        if (newArr.length > 0) {
                            newArr.forEach(({
                                src,
                                x,
                                y,
                                height,
                                width,
                                name
                            }) => {
                                arr.push({
                                    src,
                                    x: (layer.x + x),
                                        y: (layer.y + y),
                                        height,
                                        width,
                                        name: (name)
                                });
                            });
                        }
                    }
                });
                return arr;
            }

            function json(data) {
                var width = 0;
                var height = 0;

                let arr = getAllSrc(data.layers);
                let layer1 = data.layers;
                width = layer1[0].width;
                height = layer1[0].height;
                let counter = 0;
                let table = [];

                // container dimensions 
                containerElement.css('width', width + "px").css('height', height + "px").addClass('temp');
                //end 

                for (let {
                        src,
                        x,
                        y,
                        name
                    }
                    of arr) {

                    //Get Height and width of mask image [ edit button ] 
                    var ImagePosition = arr;
                    //code end 

                    if(name.indexOf('mask_') !== -1){
                    var imageUrl1 = imageUrl;
                }else{
                    var imageUrl1 = '';
                }

                    var mask = $(".container").mask({
                        imageUrl: imageUrl1,

                        // Fetch Mask images 
                        maskImageUrl: 'http://i.imgur.com/' + src,
                        // end 

                        onMaskImageCreate: function(img) {
                            // Mask image positions 
                            img.css({
                                "position": "absolute",
                                "left": x + "px",
                                "top": y + "px"
                            });
                            // end 

                        },
                        id: counter
                    });
                    // here 
                    table.push(mask);
                    fileup.onchange = function() {

                        let mask2 = table[target];
                        const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
                        document.getElementById('fileup').value = "";
                        
                    };
                    counter++;
                }
                return mask;
            }
            mask = json(jsonData);
        }); // end of function 

        // Image code 

        (function($) {
            window.JQmasks = [];
            $.fn.mask = function(options) {
                // This is the easiest way to have default options. 
                var settings = $.extend({
                    // These are the defaults. 
                    maskImageUrl: undefined,
                    imageUrl: undefined,
                    scale: 1,
                    id: new Date().getUTCMilliseconds().toString(),
                    x: 0, // image start position 
                    y: 0, // image start position 
                    onMaskImageCreate: function(div) {},
                }, options);

                // Create the image properties
                settings.maskImage = new Image
                settings.image  = new Image

                // set the cross-origin attributes
                settings.maskImage.setAttribute('crossOrigin', 'anonymous');
                settings.image.setAttribute('crossOrigin', 'anonymous');

                settings.maskImage.onload = function() {
                    // once the mask is loaded, load the image
                    container.loadImage(settings.imageUrl)
                }

                settings.image.onload = function() {
                    // once the image is loaded, render to canvas
                    container.drawMask()
                    container.drawImage()
                }

                var container = $(this);

                let prevX = 0,
                    prevY = 0,
                    draggable = false,
                    img,
                    canvas,
                    context,
                    image,
                    timeout,
                    initImage = false,
                    startX = settings.x,
                    startY = settings.y,
                    div;               

                container.drawMask = function() {
                    canvas.width = settings.maskImage.width;
                    canvas.height = settings.maskImage.height;
                    context.save();
                    context.beginPath();
                    context.globalCompositeOperation = "source-over";
                    // draw the masked image after scaling 
                    context.drawImage(settings.maskImage, 0, 0, settings.maskImage.width, settings.maskImage.height);
                    context.restore()
                };

                container.drawImage = function() {
				   
                    const img = settings.image					

                    settings.x = (canvas.width - (img.width * settings.scale)) / 2
                    settings.y = (canvas.height - (img.height * settings.scale)) / 2

                    context.globalCompositeOperation = 'source-atop';
                    context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                    initImage = false;
                }

                // change the draggable image 

                container.loadImage = function(imageUrl) {
                    
                    settings.y = startY;
                    settings.x = startX;
                    prevX = prevY = 0;

                    initImage = true;

                    settings.image.src = imageUrl; // CHANGED

                    // sirpepole Add this 
                    return settings.id;
                };

                container.loadMaskImage = function(imageUrl, from) {
                    canvas = document.createElement("canvas");
                    context = canvas.getContext('2d');
                    canvas.setAttribute("draggable", "true");
                    canvas.setAttribute("id", settings.id);
                    // settings.maskImageUrl = imageUrl;
                    settings.maskImage.src = imageUrl // CHANGED

                    div = $("<div/>", {
                        "class": "masked-img"
                    }).append(canvas);

                    // div.find("canvas").on('touchstart mousedown', function(event) 
                    div.find("canvas").on('dragstart', function(event) {
                        if (event.handled === false) return;
                        event.handled = true;
                        container.onDragStart(event);
                    });

                    div.find("canvas").on('touchend mouseup', function(event) {
                        if (event.handled === false) return;
                        event.handled = true;
                        container.selected(event);
                    });

                    div.find("canvas").bind("dragover", container.onDragOver);

                    container.append(div);
                    if (settings.onMaskImageCreate)
                        settings.onMaskImageCreate(div);

                    // container.loadImage(settings.imageUrl);
                    // Moved this to the settings.maskImage.onload
                };
                container.loadMaskImage(settings.maskImageUrl);
                JQmasks.push({
                        item: container,
                        id: settings.id
                    })
                    // Edit image 
                div.addClass('masked-img' + settings.id);
                div.attr('data-id', settings.id);
                // ends 
                return container;
            };
        }(jQuery));

.container {
        background: silver;
        position: relative;
    }
    
    .container img {
        position: absolute;
        top: 0;
        bottom: 250px;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 999;
    }
    
    .masked-img {
        overflow: hidden;
        position: relative;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <input id="fileup" name="fileup" type="file" style="display:none">

    <div id="container" class="container">
    </div>

提示：

如果我将"name": "car"替换为"name": "mask_something"，则会显示汽车图像，但是在那种情况下，汽车上会显示一个小图标，但我不希望那样...

Answer 1

您尝试遮罩图像，但是由于name.indexOf('mask_')的条件，您没有加载图像。

因此未显示汽车，因为它的名称为masknot_。由于图片没有网址，因此不会显示任何内容。如果删除该条件，则将同时显示两个图像（汽车和图标），因为您的代码显示使用image2遮罩图像。但这正是mask函数的作用。用另一幅图像遮盖图像。

因此，您可以将if条件应用于将要显示在汽车上方的图像，如果名称中masknot_不显示它。这是一个选项，但是不建议使用，因为屏蔽功能应该屏蔽某些内容。

写一个新功能来显示图像而不应用遮罩将是最好的选择。

下面是您的代码的有效示例。

var target;
const imageUrl = "https://i.imgur.com/RzEm1WK.png";

let jsonData = {
    "layers": [{
        "x": 0,
        "height": 612,
        "layers": [{
            "x": 160,
            "src": "ax0HVTs.png",
            "y": 91,
            "height": 296,
            "width": 429,
            "name": "mask_1"
        }, {
            "x": 25,
            "src": "iEA642D.jpg",
            "height": 324,
            "width": 471,
            "y": 22,
            "name": "car"
        }],
        "y": 0,
        "width": 612
    }]
};

const containerElement = $('#container');
const fileUp = $('#fileup');
let mask;

$(function() {

    // Upload image onclick mask image 

    containerElement.click(function(e) {
        var res = e.target;
        target = res.id;
        if (e.target.getContext) {
            // click only inside Non Transparent part 
            var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
            if (pixel[3] === 255) {
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        }
    });

    // Fetch mask images from json file - IGNORE this code 

    function getAllSrc(layers) {
        let arr = [];
        layers.forEach(layer => {
            if (layer.src) {
                arr.push({
                    src: layer.src,
                    x: layer.x,
                    y: layer.y,
                    height: layer.height,
                    width: layer.width,
                    name: layer.name
                });
            } else if (layer.layers) {
                let newArr = getAllSrc(layer.layers);
                if (newArr.length > 0) {
                    newArr.forEach(({
                        src,
                        x,
                        y,
                        height,
                        width,
                        name
                    }) => {
                        arr.push({
                            src,
                            x: (layer.x + x),
                                y: (layer.y + y),
                                height,
                                width,
                                name: (name)
                        });
                    });
                }
            }
        });
        return arr;
    }

    function json(data) {
        var width = 0;
        var height = 0;

        let arr = getAllSrc(data.layers);
        let layer1 = data.layers;
        width = layer1[0].width;
        height = layer1[0].height;
        let counter = 0;
        let table = [];

        // container dimensions 
        containerElement.css('width', width + "px").css('height', height + "px").addClass('temp');
        //end 

        for (let {
                src,
                x,
                y,
                name
            }
            of arr) {

            //Get Height and width of mask image [ edit button ] 
            var ImagePosition = arr;
            //code end 


            var imageUrl1 = imageUrl;


            var mask = $(".container").mask({
                imageUrl: name.indexOf('mask_') !== -1 ? imageUrl1 : undefined,

                // Fetch Mask images 
                maskImageUrl: 'http://i.imgur.com/' + src,
                // end 

                onMaskImageCreate: function(img) {
                    // Mask image positions 
                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });
                    // end 

                },
                id: counter
            });
            // here 
            table.push(mask);
            fileup.onchange = function() {

                let mask2 = table[target];
                const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
                document.getElementById('fileup').value = "";

            };
            counter++;
        }
        return mask;
    }
    mask = json(jsonData);
}); // end of function 

// Image code 

(function($) {
    window.JQmasks = [];
    $.fn.mask = function(options) {
        // This is the easiest way to have default options. 
        var settings = $.extend({
            // These are the defaults. 
            maskImageUrl: undefined,
            imageUrl: undefined,
            scale: 1,
            id: new Date().getUTCMilliseconds().toString(),
            x: 0, // image start position 
            y: 0, // image start position 
            onMaskImageCreate: function(div) {},
        }, options);

        // Create the image properties
        settings.maskImage = new Image
        settings.image  = new Image

        // set the cross-origin attributes
        settings.maskImage.setAttribute('crossOrigin', 'anonymous');
        settings.image.setAttribute('crossOrigin', 'anonymous');

        settings.maskImage.onload = function() {
            // once the mask is loaded, load the image
            container.loadImage(settings.imageUrl)
          container.drawMask()
        }

        settings.image.onload = function() {
            // once the image is loaded, render to canvas

            container.drawImage()
        }

        var container = $(this);

        let prevX = 0,
            prevY = 0,
            draggable = false,
            img,
            canvas,
            context,
            image,
            timeout,
            initImage = false,
            startX = settings.x,
            startY = settings.y,
            div;               

        container.drawMask = function() {
            if (!settings.maskImage) return true;
            canvas.width = settings.maskImage.width;
            canvas.height = settings.maskImage.height;
            context.save();
            context.beginPath();
            context.globalCompositeOperation = "source-over";
            // draw the masked image after scaling 
            if (settings.maskImage) context.drawImage(settings.maskImage, 0, 0, settings.maskImage.width, settings.maskImage.height);
            context.restore()
        };

        container.drawImage = function() {

            const img = settings.image                  

            settings.x = (canvas.width - (img.width * settings.scale)) / 2
            settings.y = (canvas.height - (img.height * settings.scale)) / 2

            context.globalCompositeOperation = 'source-atop';
            if (img) context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
          context.restore()
            initImage = false;
        }

        // change the draggable image 

        container.loadImage = function(imageUrl) {
            if (!imageUrl) return true;
            settings.y = startY;
            settings.x = startX;
            prevX = prevY = 0;

            initImage = true;

            settings.image.src = imageUrl; // CHANGED

            // sirpepole Add this 
            return settings.id;
        };

        container.loadMaskImage = function(imageUrl, from) {

            canvas = document.createElement("canvas");
            context = canvas.getContext('2d');
            canvas.setAttribute("draggable", "true");
            canvas.setAttribute("id", settings.id);
            // settings.maskImageUrl = imageUrl;
            settings.maskImage.src = imageUrl // CHANGED

            div = $("<div/>", {
                "class": "masked-img"
            }).append(canvas);

            // div.find("canvas").on('touchstart mousedown', function(event) 
            div.find("canvas").on('dragstart', function(event) {
                if (event.handled === false) return;
                event.handled = true;
                container.onDragStart(event);
            });

            div.find("canvas").on('touchend mouseup', function(event) {
                if (event.handled === false) return;
                event.handled = true;
                container.selected(event);
            });

            div.find("canvas").bind("dragover", container.onDragOver);

            container.append(div);
            if (settings.onMaskImageCreate)
                settings.onMaskImageCreate(div);

            // container.loadImage(settings.imageUrl);
            // Moved this to the settings.maskImage.onload
        };
        if (settings.maskImageUrl) {
        container.loadMaskImage(settings.maskImageUrl);
        }
        JQmasks.push({
                item: container,
                id: settings.id
            })
            // Edit image 
        div.addClass('masked-img' + settings.id);
        div.attr('data-id', settings.id);
        // ends 
        return container;
    };
}(jQuery));

从JSON获取两张图片

1 个答案: