J'essaie le code ci-dessous pour récupérer "src": "ax0HVTs.png" à partir du fichier json.... Mais l'image ne s'affiche pas, il n'y a pas non plus d'erreurs dans la console....

Voici le lien pour codepen : https://codepen.io/kidsdial/pen/WmZBmg

var mask;

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": 0,
                        "y": 0,
                        "name": "L2b-2"
                    }
                ],
                "y": 291,
                "name": "user_image_1"
            },
            {
                "x": 25,
                "layers": [{
                        "x": 0,
                        "src": "hEM2kEP.png",
                        "y": 0,
                        "name": "L2C-1"
                    },
                    {
                        "x": 0,
                        "y": 0,
                        "name": "L2C-2"
                    }
                ],
                "y": 22,
                "name": "L2"
            }
        ],
        "y": 0,
        "width": 612,
        "name": "L1"
    }]
};



$(document).ready(function() {

    $('.container').click(function(e) {
        if (e.target.getContext) {
            var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
            if (pixel[3] === 255) {
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        }
    });

    function json(data) 
	{
        function getFirstSrc(layers) 
		{
            for (let i = 0; i < layers.length; i++)
			{
                let layer = layers[i];
                if (layer.src)
                    return {
                        src: layer.src,
                        x: layer.x
                    };
                if (layer.layers) {
                    let first = getFirstSrc(layer.layers);
                    if (first)

                        return {
                            src: first.src,
                            x: layer.x + first.x
                        };
                }
		
        }		
				
                var mask = $(".container").mask({
                    maskImageUrl: 'https://i.imgur.com/' + first.src,
                    onMaskImageCreate: function(img) {

                        img.css({
                            "position": "absolute",
                            "left": layer.x + first.x + "px"

                        });
                    }
                });
				
                fileup.onchange = function() {
                    mask.loadImage(URL.createObjectURL(fileup.files[0]));
                };
}
            
    }
    json(jsonData);

}); // end of document ready


// ignore below code
(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
                    });
                };

                img = new Image();
                img.src = settings.imageUrl;
                img.setAttribute('crossOrigin', 'anonymous');
                img.onload = function() {
                    settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
                    settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
                    context.globalCompositeOperation = 'source-atop';
                    context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                    initImage = false;
                };
            }, 0);
        };

        // change the draggable image
        container.loadImage = function(imageUrl) {
            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)
            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);
        };
        container.loadMaskImage(settings.maskImageUrl);
        JQmasks.push({
            item: container,
            id: settings.id
        })
        return container;
    };
}(jQuery));
.temp {
background: black;
}

.container {
	background: black;
  position: relative;
  height:612px;
  width:612px;
 
}

.masked-img {
	overflow: hidden;
	margin-top: 30px;
	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">

</div>

J'utilise forloop pour récupérer les couches json ....

S'il vous plaît laissez-moi savoir si vous avez besoin d'éclaircissements....

Merci d'avance....

0
user8444404 12 mars 2019 à 15:39

2 réponses

Meilleure réponse
var mask;

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": 0,
                        "y": 0,
                        "name": "L2b-2"
                    }
                ],
                "y": 291,
                "name": "user_image_1"
            },
            {
                "x": 25,
                "layers": [{
                        "x": 0,
                        "src": "hEM2kEP.png",
                        "y": 0,
                        "name": "L2C-1"
                    },
                    {
                        "x": 0,
                        "y": 0,
                        "name": "L2C-2"
                    }
                ],
                "y": 22,
                "name": "L2"
            }
        ],
        "y": 0,
        "width": 612,
        "name": "L1"
    }]
};



$(document).ready(function() {

    $('.container').click(function(e) {
        if (e.target.getContext) {
            var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
            if (pixel[3] === 255) {
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        }
    });

    function json(data) 
    {
       // function getFirstSrc(layers) 
        //{
            let first;
            for (let i = 0; i < data.length; i++)
            {
                let layer = data[i];
                for (let j = 0; j< layer.layers.length; j++) {
                    let layerAbove = layer.layers[j];
                    console.log(layerAbove);
                    if (layerAbove.layers && layerAbove.layers.length > 0){
                        for (let k = 0; k< layerAbove.layers.length; k++) {
                             if (layerAbove.layers[k].src)
                                    first =  {
                                        src: layerAbove.layers[k].src,
                                        x: layerAbove.layers[k].x + layerAbove.x,
                                        y: layerAbove.layers[k].y + layerAbove.y
                                    };
                                    //return;
                        }
                        /*if (first) {
                            return;
                        }*/
                    }
                        /*if (first) {
                            return;
                        }*/
                }

                console.log(first)
                var mask = $(".container").mask({
                    maskImageUrl: 'https://i.imgur.com/' + first.src,
                    onMaskImageCreate: function(img) {

                        img.css({
                            "position": "absolute",
                            "left": first.x + "px",
                            "top": first.y + "px"

                        });
                    }
                });

                fileup.onchange = function() {
                    mask.loadImage(URL.createObjectURL(fileup.files[0]));
                };

          //  }
       }
   }
    json(jsonData.layers);

}); // end of document ready

// jq plugin for mask
(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.mousePosition = function(event) {
            return {
                x: event.pageX || event.offsetX,
                y: event.pageY || event.offsetY
            };
        }

        container.selected = function(ev) {
            var pos = container.mousePosition(ev);
            var item = $(".masked-img canvas").filter(function() {
                var offset = $(this).offset()
                var x = pos.x - offset.left;
                var y = pos.y - offset.top;
                var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
                return d[0] > 0
            });

            JQmasks.forEach(function(el) {
                var id = item.length > 0 ? $(item).attr("id") : "";
                if (el.id == id)
                    el.item.enable();
                else el.item.disable();
            });
        };

        container.enable = function() {
            draggable = true;
            $(canvas).attr("active", "true");
            div.css({
                "z-index": 2
            });
        }

        container.disable = function() {
            draggable = false;
            $(canvas).attr("active", "false");
            div.css({
                "z-index": 1
            });
        }

        container.onDragStart = function(evt) {
            container.selected(evt);
            prevX = evt.clientX;
            prevY = evt.clientY;
            var img = new Image();
            evt.originalEvent.dataTransfer.setDragImage(img, 10, 10);
            evt.originalEvent.dataTransfer.setData('text/plain', 'anything');
        };

        container.getImagePosition = function() {
            return {
                x: settings.x,
                y: settings.y,
                scale: settings.scale
            };
        };

        container.onDragOver = function(evt) {
            if (draggable && $(canvas).attr("active") === "true") {
                var x = settings.x + evt.clientX - prevX;
                var y = settings.y + evt.clientY - prevY;
                if (x == settings.x && y == settings.y)
                    return; // position has not changed
                settings.x += evt.clientX - prevX;
                settings.y += evt.clientY - prevY;
                prevX = evt.clientX;
                prevY = evt.clientY;
                container.updateStyle();
            }
        };

        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
                    });
                };

                img = new Image();
                img.src = settings.imageUrl;
                img.setAttribute('crossOrigin', 'anonymous');
                img.onload = function() {
                    settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
                    settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
                    context.globalCompositeOperation = 'source-atop';
                    context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                    initImage = false;
                };
            }, 0);
        };

        // change the draggable image
        container.loadImage = function(imageUrl) {
            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)
            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);
        };
        container.loadMaskImage(settings.maskImageUrl);
        JQmasks.push({
            item: container,
            id: settings.id
        })
        return container;
    };
}(jQuery));
0
Houssein Zouari 12 mars 2019 à 13:42

Cet exemple d'exemple vous aidera à trouver la position exacte et le src de l'image dont vous avez besoin

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": 0,
                        "y": 0,
                        "name": "L2b-2"
                    }
                ],
                "y": 291,
                "name": "user_image_1"
            },
            {
                "x": 25,
                "layers": [{
                        "x": 0,
                        "src": "hEM2kEP.png",
                        "y": 0,
                        "name": "L2C-1"
                    },
                    {
                        "x": 0,
                        "y": 0,
                        "name": "L2C-2"
                    }
                ],
                "y": 22,
                "name": "L2"
            }
        ],
        "y": 0,
        "width": 612,
        "name": "L1"
    }]
}];

console.log(jsonData);

let value =[];
let v = jsonData.filter((key) => { 
    return key.layers[0].layers[1].layers.some( (val) => { if(val.src == "ax0HVTs.png"){ value.push(val.src) } 
                                                       });
})

Production :

value = ["ax0HVTs.png"]

Vous pouvez même utiliser la fonction find qui renverra l'objet entier si le src donné est présent

0
Bathri Nathan 12 mars 2019 à 13:13