Dev Faq
2
votes

Afficher le texte et l'image dans la même position

nous autorisons l'utilisateur à télécharger une image une fois que l'utilisateur clique sur la voiture ....

entrez la description de l'image ici

Une fois que l'utilisateur a téléchargé l'image, nous sommes afficher l'image téléchargée par l'utilisateur sur le dessus de la voiture et afficher le texte " Modifier " à l'extérieur du conteneur ....

entrez la description de l'image ici

Condition :

Mais je veux afficher ce texte dans la même position que celle de l'image ....

entrez la description de l'image ici

si la position de la voiture est à gauche: 1px Je veux que la position du texte soit également gauche: 1px

Codepen: https://codepen.io/kidsdial/pen/vMLzdJ

Fiddle: https://jsfiddle.net/kidsdial1/s1vukmxh/1/ 

<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 class="container">

</div>
.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;
}


.txtContainer{ position:absolute;  text-align:center; color:#FFF}

.txtContainer:hover {
     background: red;
     padding: 1px;
	border-style: dotted;
}

.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

.edit {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
  position:relative;
  z-index: 3;
}
.edit:hover {
  background: white;
  color: black;
  position:relative;
  z-index: 3;
}

.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}
var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";

// Json file - it includes car image and its positions

let jsonData = {
    "layers": [{
        "x": 10,
        "height": 412,
        "layers": [
            {
                "x": 20,
                "layers": [{
                        "x": 30,
                        "src": "iEA642D.jpg",
                        "y": 31,
                        "name": "L2b-1"
                    }
                    
                ],
                "y": 21,
                "name": "user_image_1"
            }
        ],
        "y": 11,
        "width": 412,
        "name": "L1"
    }]
};

$(document).ready(function() {

    // ignore below code - it  will upload image onclick car

    $('.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);
            }
        }
    });

    // Below code will fetch car image from json file

    function getAllSrc(layers) {
        let arr = [];
        layers.forEach(layer => {
            if (layer.src) {
                arr.push({
                    src: layer.src,
                    x: layer.x,
                    y: layer.y,
                    name: layer.name
                });
            } else if (layer.layers) {
                let newArr = getAllSrc(layer.layers);
                if (newArr.length > 0) {
                    newArr.forEach(({
                        src,
                        x,
                        y,
                        name
                    }) => {
                        arr.push({
                            src,
                            x: (layer.x + x),
                            y: (layer.y + y),
                            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 = [];

        for (let {
                src,
                x,
                y,
                name
            } of arr) {
            $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
            if (name.indexOf('mask_') !== -1) {
                var imageUrl1 = imageUrl;
            } else {
                var imageUrl1 = '';
            }
            var mask = $(".container").mask({
                imageUrl: imageUrl1,
                maskImageUrl: 'https://i.imgur.com/' + src,
                onMaskImageCreate: function(img) {

				// car positions : 
				
                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });

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

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

                //  Edit text

    $("<span class=\"pip\">" +
    "<br/><span style =\"left:  layer.x + 'px;'\" class=\"edit\" >Edit </span>" +
    "</span>").insertAfter("#fileup");

                // Edit code end here....
               
            };
            counter++;
        }

    }
    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.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.updateStyle = function() {
            return new Promise((resolve, reject) => {
                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
                    });
                    resolve();
                };
            });
        };

        function renderInnerImage() {
            img = new Image();
            img.setAttribute('crossOrigin', 'anonymous');
            img.src = settings.imageUrl;
            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;
            };
        }

        // 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().then(renderInnerImage);
            // sirpepole  Add this
            return settings.id;
        };


        // change the masked Image
        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;
            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));

10 commentaires

Vous ne pouvez pas vraiment dire quelle est la vraie question ici - comment déplacer ces éléments vers une position spécifique, ou comment déterminer ce que cette position devrait être en premier lieu?

vous recherchez ceci ?

Merci beaucoup.

@MunimMunna Quand j'ai essayé avec 2 images dans codepen , il a affiché Edit bouton une seule fois .... pouvez-vous vérifier une fois .....

@MunimMunna ce que je veux, c'est que le bouton modifier doit s'afficher de manière dynamique pour n'importe quel nombre d'images ici j'ai 8 images: jsfiddle.net/r54wqfmv

Dans codepen, utilisez $ ("" + ...) .insertAfter ("#" + target) , dans jsFiddle, utilisez $ (". Masked -img # "+ newImageLoadedId) .

@MunimMunna désolé pour le retard, j'ai suivi votre suggestion pour codepen, cela a fonctionné pour 2 images et aussi pour 8 images, mais il y a un petit problème en ce que le bouton modifier disparaîtra si nous cliquons sur d'autres images comme ici: lien vidéo , voici codepen: codepen.io/kidsdial/pen/rbMKWX

@MunimMunna même problème pour 9 images également: codepen.io/kidsdial/pen/jRMKyQ

@MunimMunna ii pense que c'est parce que le texte edit chevauche avec d'autres images, j'ai donc essayé de mettre le texte edit au milieu de l'image, alors j'ai essayé $ (" "+" Edit " + "") .insertAfter ("#" + target); , mais ce n'est pas un calque de calcul. largeur et couche.hauteur ..... s'il vous plaît aidez-moi ....

@MunimMunna Merci pour votre temps, une autre solution m'a aidé .....

3 Réponses :

1
votes

Donc, je pense que vous cherchez quelque chose de similaire à ceci:

Dans jQuery, vous pouvez ajouter ceci à la place de votre code d'édition: 

<section id="input-container">
  <div class="image-editor" >
    <div class="edit"><button>edit</button></div>
    <div class="mask-img" >...</div>
  </div>
</section>

Ce code ajoutera votre span au div img masqué (celui qui contient l'image).

Vous avez essayé de définir la position relative dans le texte à l'intérieur de la span, et cela n'a pas fonctionné, c'est parce que vous avez besoin du parent direct pour être la position absolue (et le parent direct est l'étendue pip . Ajoutez plutôt ceci: 

.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
  position: relative;
  top: -200px; // The height of the canvas
}

Et supprimez position: relative ; de .edit.

Et cela devrait fonctionner. Visualisation de la solution

Comme dans votre question précédente, je suppose que vous voulez toucher le moins possible votre base de code mais il serait utile pour vous d'apprendre le CSS et JavaScript. Si vous aviez la bonne structure HTML, il serait plus facile pour vous de faire ce genre de choses sans avoir besoin de faire des trucs comme je l'ai publié ( -200px ? Ça fait du mal). Par exemple, si votre code HTML ressemblait à ceci: 

$(".masked-img").append("<span class=\"pip\">" +
"<br/><span style =\"left:  layer.x + 'px;'\" class=\"edit\" >Edit </span>" +
"</span>");

Mais pour cela, vous aurez besoin de changements majeurs dans votre code et cela est hors de portée pour cette question.

2 commentaires

C'est parce que vous assignez top à la plage d'édition, qui, comme je l'ai dit dans ma réponse, se trouve dans la plage pip, si vous voulez ajouter top: layer.y, vous devez le faire dans la plage id = "pip"

désolé, j'ai essayé votre code ici: codepen.io/kidsdial/pen/bJpXvv , mais < Le bouton code> Modifier ne s'affiche que parce que nous avons donné top: -200px, mais je dois l'obtenir en utilisant layer.x & layer.y

4
votes

Modifications CSS - ** Mettez à jour .pip ** CSS avec le CSS ci-dessous. 

<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 class="container"></div>

Changements de script - Changez simplement le div d'insertion en .masked-img . Calculez et appliquez les espaces gauche , haut .

Toutes les modifications mentionnées ont été mises à jour dans un extrait de code ci-dessous. Essayez ceci, j'espère que cela vous aidera. Merci 

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

.txtContainer{ 
  position:absolute; 
  text-align:center; 
  color:#FFF
}

.txtContainer:hover {
  background: red;
  padding: 1px;
	border-style: dotted;
}

.pip {
  display: inline-block;
  margin: 0;
  position: absolute;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

.edit {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
  position:relative;
  z-index: 3;
}
.edit:hover {
  background: white;
  color: black;
  position:relative;
  z-index: 3;
}

.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

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

// Json file - it includes car image and its positions

let jsonData = {
  "path" : " newyear collage\/",
  "info" : {
    "author" : "",
    "keywords" : "",
    "file" : "newyear collage",
    "date" : "sRGB",
    "title" : "",
    "description" : "Normal",
    "generator" : "Export Kit v1.2.8"
  },
  "name" : "newyear collage",
  "layers" : [
    {
      "x" : 0,
      "height" : 612,
      "layers" : [
        {
          "x" : 0,
          "color" : "0xFFFFFF",
          "height" : 612,
          "y" : 0,
          "width" : 612,
          "shapeType" : "rectangle",
          "type" : "shape",
          "name" : "bg_rectangle"
        },
        {
          "x" : 160,
          "height" : 296,
          "layers" : [
            {
              "x" : 0,
              "height" : 296,
              "src" : "iEA642D.jpg",
              "y" : 0,
              "width" : 429,
              "type" : "image",
              "name" : "mask_image_1"
            },
            {
              "radius" : "26 \/ 27",
              "color" : "0xACACAC",
              "x" : 188,
              "y" : 122,
              "height" : 53,
              "width" : 53,
              "shapeType" : "ellipse",
              "type" : "shape",
              "name" : "useradd_ellipse1"
            }
          ],
          "y" : 291,
          "width" : 429,
          "type" : "group",
          "name" : "user_image_1"
        },
        {
          "x" : 25,
          "height" : 324,
          "layers" : [
            {
              "x" : 0,
              "height" : 324,
              "src" : "iEA642D.jpg",
              "y" : 0,
              "width" : 471,
              "type" : "image",
              "name" : "mask_image_2"
            },
            {
              "radius" : "26 \/ 27",
              "color" : "0xACACAC",
              "x" : 209,
              "y" : 136,
              "height" : 53,
              "width" : 53,
              "shapeType" : "ellipse",
              "type" : "shape",
              "name" : "useradd_ellipse_2"
            }
          ],
          "y" : 22,
          "width" : 471,
          "type" : "group",
          "name" : "user_image_2"
        }
      ],
      "y" : 0,
      "width" : 612,
      "type" : "group",
      "name" : "newyearcollage08"
    }
  ]
};

$(document).ready(function() {

    // ignore below code - it  will upload image onclick car

    $('.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);
            }
        }
    });

    // Below code will fetch car image from json file

    function getAllSrc(layers) {
        let arr = [];
        layers.forEach(layer => {
            if (layer.src) {
                arr.push({
                    src: layer.src,
                    x: layer.x,
                    y: layer.y,
                    name: layer.name
                });
            } else if (layer.layers) {
                let newArr = getAllSrc(layer.layers);
                if (newArr.length > 0) {
                    newArr.forEach(({
                        src,
                        x,
                        y,
                        name
                    }) => {
                        arr.push({
                            src,
                            x: (layer.x + x),
                            y: (layer.y + y),
                            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 = [];

        for (let {
                src,
                x,
                y,
                name
            } of arr) {
            $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
            var imagePosition = arr;
            if (name.indexOf('mask_') !== -1) {
                var imageUrl1 = imageUrl;
            } else {
                var imageUrl1 = '';
            }
            var mask = $(".container").mask({
                imageUrl: imageUrl1,
                maskImageUrl: 'https://i.imgur.com/' + src,
                onMaskImageCreate: function(img) {

				// car positions : 
				
                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });

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

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

                //  Edit text 

              if($(".masked-img" + newImageLoadedId).length === 1) {
    $("<span class=\"pip\">" + 
    "<span class=\"edit\" >Edit </span>" +
    "</span>").insertAfter(".masked-img" + newImageLoadedId).css({"left": imagePosition[newImageLoadedId].x + "px", "top": imagePosition[newImageLoadedId].y - $('.pip').height() + "px"});
                // Edit code end here....
              }         
            };
            counter++;
        }

    }
    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.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
            });
            if(!div.hasClass('masked-img0') && !div.hasClass('masked-img1')) {
               div.addClass('masked-img1');
            }
        }

        container.disable = function() {
            draggable = false;
            $(canvas).attr("active", "false");
            div.css({
                "z-index": 1
            });
            if(!div.hasClass('masked-img0') && !div.hasClass('masked-img1')) {
               div.addClass('masked-img0');
            }
        }

        container.updateStyle = function() {
            return new Promise((resolve, reject) => {
                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
                    });
                    resolve();
                };
            });
        };

        function renderInnerImage() {
            img = new Image();
            img.setAttribute('crossOrigin', 'anonymous');
            img.src = settings.imageUrl;
            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;
            };
        }

        // 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().then(renderInnerImage);
            // sirpepole  Add this
            return settings.id;
        };


        // change the masked Image
        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;
            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));
<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 class="container"></div>
.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;
}

.txtContainer{ 
  position:absolute; 
  text-align:center; 
  color:#FFF
}

.txtContainer:hover {
  background: red;
  padding: 1px;
	border-style: dotted;
}

.pip {
  display: inline-block;
  margin: 0;
  position: absolute;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

.edit {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
  position:relative;
  z-index: 3;
}
.edit:hover {
  background: white;
  color: black;
  position:relative;
  z-index: 3;
}

.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

Une autre option si vous avez plusieurs images. 

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

// Json file - it includes car image and its positions

let jsonData = {
    "layers": [{
        "x": 10,
        "height": 412,
        "layers": [
            {
                "x": 20,
                "layers": [{
                        "x": 30,
                        "src": "iEA642D.jpg",
                        "y": 31,
                        "name": "L2b-1"
                    }
                    
                ],
                "y": 21,
                "name": "user_image_1"
            }
        ],
        "y": 11,
        "width": 412,
        "name": "L1"
    }]
};

$(document).ready(function() {

    // ignore below code - it  will upload image onclick car

    $('.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);
            }
        }
    });

    // Below code will fetch car image from json file

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

    function json(data)

    {
        var width = 0;
        var height = 0;
        var leftValue = 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,
                name
            } of arr) {
            $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
            if (name.indexOf('mask_') !== -1) {
                var imageUrl1 = imageUrl;
            } else {
                var imageUrl1 = '';
            }
            var mask = $(".container").mask({
                imageUrl: imageUrl1,
                maskImageUrl: 'https://i.imgur.com/' + src,
                onMaskImageCreate: function(img) {

				// car positions : 
				
                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });

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

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

                //  Edit text

    $("<span class=\"pip\">" +
    "<span class=\"edit\" >Edit </span>" +
    "</span>").insertAfter(".masked-img").css({"left": x + "px", "top": y - $('.pip').height() + "px"});

                // Edit code end here....
               
            };
            counter++;
        }

    }
    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.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.updateStyle = function() {
            return new Promise((resolve, reject) => {
                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
                    });
                    resolve();
                };
            });
        };

        function renderInnerImage() {
            img = new Image();
            img.setAttribute('crossOrigin', 'anonymous');
            img.src = settings.imageUrl;
            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;
            };
        }

        // 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().then(renderInnerImage);
            // sirpepole  Add this
            return settings.id;
        };


        // change the masked Image
        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;
            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));
$("<span class=\"pip\">" +
    "<span class=\"edit\" >Edit </span>" +
    "</span>").insertAfter(".masked-img").css({"left": x + "px", "top": y - $('.pip').height() + "px"});

.pip {
  display: inline-block;
  margin: 0;
  position: absolute;
}

7 commentaires

Merci beaucoup, quand j'ai essayé pour 2 images, il n'affichait Modifier qu'une seule fois, pouvez-vous s'il vous plaît vérifier et m'aider: codepen.io/kidsdial/pen/yrOWWJ

Merci @vickeycolors pour la réponse. 2 images fonctionnent d'abord, vous devez mettre à jour la structure. Actuellement, lorsque j'ajoute la première image, il crée automatiquement 2 boutons modifier pour les deux images. La tâche de modification sera automatiquement résolue lorsque vous avez résolu le problème de structure. Merci

désolé, parlez-vous de ceci: prnt.sc/n7wdgg ?

pour image1, il prend à gauche: 25px; top: 22px; mais pour l'image2 également, elle prend les mêmes dimensions, à la place pour l'image2 - elle devrait prendre x: 160, y: 291 comme présent dans fichier json ....

Oui, je sais que pouvez-vous donner du temps. J'ai besoin de revoir votre code. Merci

Je viens de mettre à jour votre code avec quelques modifications de script. Maintenant, l'édition sera visible pour les deux images en fonction de leurs positions. Merci

continuons cette discussion dans le chat

0
votes

Remplacer insertAfter ("# fileup"); Avec insertBefore (". masked-img canvas"); 

<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 class="container">

</div>
.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;
}


.txtContainer{ position:absolute;  text-align:center; color:#FFF}

.txtContainer:hover {
     background: red;
     padding: 1px;
	border-style: dotted;
}

.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

.edit {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
  position:relative;
  z-index: 3;
}
.edit:hover {
  background: white;
  color: black;
  position:relative;
  z-index: 3;
}

.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}
var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";

// Json file - it includes car image and its positions

let jsonData = {
    "layers": [{
        "x": 10,
        "height": 412,
        "layers": [
            {
                "x": 20,
                "layers": [{
                        "x": 30,
                        "src": "iEA642D.jpg",
                        "y": 31,
                        "name": "L2b-1"
                    }
                    
                ],
                "y": 21,
                "name": "user_image_1"
            }
        ],
        "y": 11,
        "width": 412,
        "name": "L1"
    }]
};

$(document).ready(function() {

    // ignore below code - it  will upload image onclick car

    $('.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);
            }
        }
    });

    // Below code will fetch car image from json file

    function getAllSrc(layers) {
        let arr = [];
        layers.forEach(layer => {
            if (layer.src) {
                arr.push({
                    src: layer.src,
                    x: layer.x,
                    y: layer.y,
                    name: layer.name
                });
            } else if (layer.layers) {
                let newArr = getAllSrc(layer.layers);
                if (newArr.length > 0) {
                    newArr.forEach(({
                        src,
                        x,
                        y,
                        name
                    }) => {
                        arr.push({
                            src,
                            x: (layer.x + x),
                            y: (layer.y + y),
                            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 = [];

        for (let {
                src,
                x,
                y,
                name
            } of arr) {
            $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
            if (name.indexOf('mask_') !== -1) {
                var imageUrl1 = imageUrl;
            } else {
                var imageUrl1 = '';
            }
            var mask = $(".container").mask({
                imageUrl: imageUrl1,
                maskImageUrl: 'https://i.imgur.com/' + src,
                onMaskImageCreate: function(img) {

				// car positions : 
				
                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });

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

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

                //  Edit text

    $("<span class=\"pip\">" +
    "<br/><span style =\"left:  layer.x + 'px;'\" class=\"edit\" >Edit </span>" +
    "</span>").insertBefore(".masked-img canvas");

                // Edit code end here....
               
            };
            counter++;
        }

    }
    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.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.updateStyle = function() {
            return new Promise((resolve, reject) => {
                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
                    });
                    resolve();
                };
            });
        };

        function renderInnerImage() {
            img = new Image();
            img.setAttribute('crossOrigin', 'anonymous');
            img.src = settings.imageUrl;
            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;
            };
        }

        // 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().then(renderInnerImage);
            // sirpepole  Add this
            return settings.id;
        };


        // change the masked Image
        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;
            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 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO