Удалить загруженное изображение по тексту клика

Question

Как только пользователь нажимает на изображение маски, мы разрешаем пользователю загружать пользовательское изображение .... Вместе с изображением мы отображаем текст «Удалить изображение» ....

Issue :

Нажав на этот текст, я хочу удалить загруженное изображение, как в этом codepen1 .... но сейчас только текст удаляется, когда я использовалниже код:

var target;
var imageUrl = "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" : 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() {

    // below code will upload image onclick mask image

   $('.container').click(function(e) {

        var res = e.target;
        target = res.id;
        console.log(target);
        if (e.target.getContext) 
		{		          
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);           
        }
    });
	
	// Below code will fetch mask images 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) {

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

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

                    let mask2 = table[target];
                    mask2.loadImage(URL.createObjectURL(fileup.files[0]));
                    document.getElementById('fileup').value = "";
					
					// Below code to Remove image

                $("<span class=\"pip\">" +
                    "<img src='https://i.imgur.com/' + src  />" +
                    "<br/><span class=\"remove\">Remove image</span>" +
                    "</span>").insertAfter("#fileup");

                $(".remove").click(function() {
                    $(this).parent(".pip").remove();
                });

                // Remove image	code ended here....	
                };
                counter++;
				// get the text
				
            }
        }
json(jsonData);
}); // end of document ready

// jq plugin 

(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) {
            if (evt.target.getContext) {
                var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;

                $(canvas).attr("active", "true");
                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 (evt.target.getContext) {
                var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
                if (pixel[3] === 255) {
                    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;
                        clearTimeout(timeout);
                        timeout = setTimeout(function() {
                            container.updateStyle();
                            renderInnerImage();
                        }, 20);
                    }
                } else {
                    evt.stopPropagation();
                    return false;
                }
            }
        };

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

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

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

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

<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>

Пожалуйста, дайте мне знать, если вам нужна любая другая информация ....

Answer 1

Итак, для начала вам необходимо решить 2 разные задачи:

1) Некоторые имеют ссылку на ваше изображение в кнопке.

Кнопки не очень умные, и вам нужно будет добавить немного магии. Как если бы вы следовали своему коду, когда вы загружаете изображение в основном, вы загружаете холст с новым рисунком, поэтому нелегко определить, что удалить. Одна из проблем этого подхода заключается в том, что вам трудно найти изображение для удаления. Но вы можете, после загрузки изображения, вернуть информацию об этом изображении на холсте и затем добавить ее в массив.

Насколько я вижу, на холсте будет только одно изображение, или, по крайней мере, оно будет рисовать поверх последнего, поэтому самое простое решение - очистить весь холст. Сначала мы возвращаем идентификатор холста, который содержит изображение:

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

        // Add this
        return settings.id;
    };

Затем вы можете сохранить его в этой строке: const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));

Второй шаг в этой задаче состоит в том, чтобы добавить его в качестве идентификатора кнопки (хотя это не рекомендуемый способ, но тот, который заставит вас изменить свой код, тем не менее):

$("<br/><span id=\"" + newImageLoadedId + "\" class=\"remove\">Remove image</span>").insertAfter("#fileup");

Теперь ваша кнопка имеет ссылку на изображение, которое вы загрузили.

2) Фактически удалите его.

Эта проблема проще, но вам просто нужно очистить изображение на холсте:

$ ("canvas #" + id) .getContext ('2d'). ClearReact (...)

И это все, я бы посоветовал вам сделать рефакторинг и немного почистить ваш код. И вы можете добавить некоторые улучшения, такие как.

Если вы хотите загрузить более одного изображения на холст, то этот метод не самый лучший для удаления уникального изображения, но ваш код также не позволяет вам сделать это прямо сейчас. Если вы хотите сохранить несколько изображений, я предлагаю вам проверить этот ответ , поэтому в основном вам нужно отслеживать каждое изображение как новый слой.

Обработка события щелчка с замыканием вместо сохранения идентификатора для кнопки (это делает идентификатор не уникальным, а скорее существует как в кнопке, так и на холсте). Сделайте процесс загрузки изображения более интуитивно понятным, даже, например, используйте счетчик вместо отметки времени.

Отказ от ответственности : Это решение не улучшает вашу кодовую базу, оно просто предлагает вам возможное решение вашей проблемы, а предлагаемое решение просто затрагивает как можно меньшее количество строк. В конце я предлагаю несколько вещей, но со временем и большим опытом работы с jQuery / JavaScript вы решите эту проблему лучше.