Question

我正在从JSON中动态获取多张图片，并将这些图片显示在html页面中，在每张图片的顶部，我想显示一个图标。...

问题：

但是Icon仅显示在单个图像上。...

这是codepen：https://codepen.io/kidsdial/pen/RdMrxy

下面是代码段：

var target;
var font = "<img src = 'https://i.imgur.com/RzEm1WK.png'>";

let jsonData = {
    "layers": [{
        "x": 0,
        "height": 612,
        "layers": [{
                "x": 0,
                "y": 0,
                "name": "L2a"
            },
            {
                "x": 160,
                "layers": [{
                        "x": 0,
                        "src": "ax0HVTs.png",
                        "y": 0,
                        "name": "L2b-1"
                    },
                    {
                        "x": 188,
                        "y": 122,
                        "name": "L2b-2"
                    }

                ],
                "y": 291,
                "name": "user_image_1"
            },
            {
                "x": 25,
                "layers": [{
                        "x": 0,
                        "src": "hEM2kEP.png",
                        "y": 0,
                        "name": "L2C-1"
                    },
                    {
                        "x": 209,
                        "y": 136,
                        "name": "L2C-2"
                    }
                ],
                "y": 22,
                "name": "L2"
            }
        ],
        "y": 0,
        "width": 612,
        "name": "L1"
    }]
};



$(document).ready(function() {

    // upload image onclick

    $('.container').click(function(e) {

        var res = e.target;
        target = res.id;
        console.log(target);
        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);
            }
        }

    });

    function getAllSrc(layers) {
        let arr = [];
        layers.forEach(layer => {
            if (layer.src) {
                arr.push({
                    src: layer.src,
                    x: layer.x,
                    y: layer.y
                });
            } else if (layer.layers) {
                let newArr = getAllSrc(layer.layers);
                if (newArr.length > 0) {
                    newArr.forEach(({
                        src,
                        x,
                        y
                    }) => {
                        arr.push({
                            src,
                            x: (layer.x + x),
                            y: (layer.y + y)
                        });
                    });
                }
            }
        });
        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 = [];

        for (let {
                src,
                x,
                y
            } of arr) {

            $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');

            var mask = $(".container").mask({
                maskImageUrl: 'https://i.imgur.com/' + src,
                font: font,
                onMaskImageCreate: function(img) {

                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });

                },
                id: counter
            });
            table.push(mask);
            fileup.onchange = function() {

                let mask2 = table[target];
                font: font,
                    mask2.loadImage(URL.createObjectURL(fileup.files[0]));
                font: font,
                    document.getElementById('fileup').value = "";
            };
            counter++;
        }

    }

    json(jsonData);
}); // end of document ready

(function($) {
    var 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);


        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.updateStyle = function() {
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                //context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.globalCompositeOperation = "source-over";
                image = new Image();
                image.setAttribute('crossOrigin', 'anonymous');
                image.src = settings.maskImageUrl;
                image.onload = function() {
                    canvas.width = image.width;
                    canvas.height = image.height;
                    context.drawImage(image, 0, 0, image.width, image.height);
                    div.css({
                        "width": image.width,
                        "height": image.height
                    });
                };



            }, 20);
        };

        // change the draggable image
        container.loadImage = function(imageUrl) {
            console.log("load");
            if (img)
                img.remove();
            // reset the code.
            settings.y = startY;
            settings.x = startX;
            prevX = prevY = 0;
            settings.imageUrl = imageUrl;
            initImage = true;
            container.updateStyle();
        };

        // change the masked Image
        container.loadMaskImage = function(imageUrl, from) {
            if (div)
                div.remove();
            canvas = document.createElement("canvas");
            context = canvas.getContext('2d');
            canvas.setAttribute("draggable", "true");
            canvas.setAttribute("id", settings.id);
            settings.maskImageUrl = imageUrl;
            div = $("<div/>", {
                "class": "masked-img"
            }).append(canvas);

            // div.find("canvas").on('touchstart mousedown', function(event)

            container.append(div);
            if (settings.onMaskImageCreate)
                settings.onMaskImageCreate(div);
            container.loadImage(settings.imageUrl);
        };

        container.loadMaskImage(settings.maskImageUrl);
        JQmasks.push({
            item: container,
            id: settings.id
        })
        return container;
    };
}(jQuery));

.temp {}

.container {
	background: gold;
  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://code.jquery.com/jquery-3.3.1.min.js"></script>

<input id="fileup" name="fileup" type="file" style="display:none" >

<div class="container">

<img src = "https://i.imgur.com/RzEm1WK.png">

</div>

Answer 1

解决方案＃1

可以使用CSS解决您的问题。

只需将下一条规则添加到CSS。

.masked-img::before {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -31px;
  margin-top: -25px;
  content: url(https://i.imgur.com/RzEm1WK.png);
}

如果CSS方法适合您，则可以删除与该图标相关的所有JS代码。

此方法的缺点是您无法使用CSS更改图标的大小。

解决方案2

从.html文件中删除<img src = "https://i.imgur.com/RzEm1WK.png">。这没用。

将var font = "<img src = 'https://i.imgur.com/RzEm1WK.png'>";替换为var imageUrl = 'https://i.imgur.com/RzEm1WK.png';

在第136行的font : font,替换imageUrl : imageUrl,

删除第152和154行

交换行img.src = settings.imageUrl;和img.setAttribute('crossOrigin', 'anonymous');

以下是您的项目的链接（已编辑）：https://jsfiddle.net/Artem_Bozhko/hc39Luws/21/

在每个图像上方动态显示图标

1 个答案: