0

Background :

1.User Click on Mask image

2.Image will upload.

3.Edit & Remove Texts will display

4.User click on Remove Text

5.Both Image & Remove Text Disappears

Issue :

Edit Text still Display , but Edit text should also disappear....

video link

$(".remove").click(function(event) {
    const canvasId = "canvas#" + event.currentTarget.id;
    // Delete the image
    const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
    ctx.fillStyle = "white"
    ctx.fillRect(0, 0, 500, 500)
    // Delete the Remove button
    $(this).remove();
    //$(this).edit();
});

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

Fiddle : https://jsfiddle.net/kidsdial1/r2L7w6d3/

Code snippet :

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

let jsonData = {
  "layers" : [
    {
      "x" : 0,
      "height" : 612,
      "layers" : [
        {
          "x" : 160,
          "layers" : [
            {
              "x" : 0,
              "src" : "ax0HVTs.png",
              "y" : 0,
              "height" : 296,
              "width" : 429,
              "name" : "L2b-1"
            }
          ],
          "y" : 291,
          "name" : "user_image_1"
        },
        {
          "x" : 25,
          "layers" : [
            {
              "x" : 0,
              "src" : "hEM2kEP.png",
        "height" : 324,
        "width" : 471,
              "y" : 0,
              "name" : "L2C-1"
            }
          ],
          "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) {
            // 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 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,
                    height: layer.height,
                    width: layer.width,
                    name: layer.name
                });
            } else if (layer.layers) {
                let newArr = getAllSrc(layer.layers);
                if (newArr.length > 0) {
                    newArr.forEach(({
                        src,
                        x,
                        y,
                        height,
                        width,
                        name
                    }) => {
                        arr.push({
                            src,
                            x: (layer.x + x),
                            y: (layer.y + y),
                            height,
                            width,
                            name: (name)
                        });
                    });
                }
            }
        });
        return arr;
    }

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

        let arr = getAllSrc(data.layers);

        let layer1 = data.layers;
        width = layer1[0].width;
        height = layer1[0].height;
        let counter = 0;
        let table = [];

        for (let {
                src,
                x,
                y,
                name
            } of arr) {
            $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');

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

            // Display icon only for mask images

            if (name.indexOf('mask_') !== -1) {
                var imageUrl1 = imageUrl;
            } else {
                var imageUrl1 = '';
            }
            //code end

            var mask = $(".container").mask({
                imageUrl: imageUrl1,
                maskImageUrl: 'https://i.imgur.com/' + src,
                onMaskImageCreate: function(img) {
                    // Mask image positions
                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });
                    // end

                },
                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 image

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

                $("<br/><span id=\"" + newImageLoadedId + "\" class=\"remove\">Remove</span>").insertAfter(".masked-img" + newImageLoadedId).css({
                    "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
                    "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2 +25) + "px"
                });

                $(".remove").click(function(event) {
                    const canvasId = "canvas#" + event.currentTarget.id;
                    // Delete the image
                    const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
                    ctx.fillStyle = "white"
                    ctx.fillRect(0, 0, 500, 500)
                    // Delete the Remove button
                    $(this).remove();
                    //$(this).edit();
                });

                // Remove image code end here....
            };
            counter++;
        }

    }
    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.getImagePosition = function() {
            return {
                x: settings.x,
                y: settings.y,
                scale: settings.scale
            };
        };



        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
        })
        // Edit image
        div.addClass('masked-img' + settings.id);
        // code end
        return container;
    };
}(jQuery));
.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 { 
 background: #444;
 border: 1px solid black;
 color: white;
 text-align: center;
 cursor: pointer;
 position: absolute;
 z-index: 3;
}

.remove:hover {
 background: white;
 color: black;
}

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

.edit:hover {
 background: white;
 color: black;
 position: absolute;
 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;
}
<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>
Sami Ahmed Siddiqui
  • 2,328
  • 1
  • 16
  • 29

3 Answers3

0

Just added $(this).next().remove(); line in your remove click function. Important to note that this line should be added before removing the Remove button.

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

let jsonData = {
  "layers" : [
    {
      "x" : 0,
      "height" : 612,
      "layers" : [
        {
          "x" : 160,
          "layers" : [
            {
              "x" : 0,
              "src" : "ax0HVTs.png",
              "y" : 0,
              "height" : 296,
              "width" : 429,
              "name" : "L2b-1"
            }
          ],
          "y" : 291,
          "name" : "user_image_1"
        },
        {
          "x" : 25,
          "layers" : [
            {
              "x" : 0,
              "src" : "hEM2kEP.png",
        "height" : 324,
        "width" : 471,
              "y" : 0,
              "name" : "L2C-1"
            }
          ],
          "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) {
            // 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 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,
                    height: layer.height,
                    width: layer.width,
                    name: layer.name
                });
            } else if (layer.layers) {
                let newArr = getAllSrc(layer.layers);
                if (newArr.length > 0) {
                    newArr.forEach(({
                        src,
                        x,
                        y,
                        height,
                        width,
                        name
                    }) => {
                        arr.push({
                            src,
                            x: (layer.x + x),
                            y: (layer.y + y),
                            height,
                            width,
                            name: (name)
                        });
                    });
                }
            }
        });
        return arr;
    }

    function json(data)

    {
        var width = 0;
        var height = 0;

        let arr = getAllSrc(data.layers);

        let layer1 = data.layers;
        width = layer1[0].width;
        height = layer1[0].height;
        let counter = 0;
        let table = [];

        for (let {
                src,
                x,
                y,
                name
            } of arr) {
            $(".container").css('width', width + "px").css('height', height + "px").addClass('temp');

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

            // Display icon only for mask images

            if (name.indexOf('mask_') !== -1) {
                var imageUrl1 = imageUrl;
            } else {
                var imageUrl1 = '';
            }
            //code end

            var mask = $(".container").mask({
                imageUrl: imageUrl1,
                maskImageUrl: 'https://i.imgur.com/' + src,
                onMaskImageCreate: function(img) {
                    // Mask image positions
                    img.css({
                        "position": "absolute",
                        "left": x + "px",
                        "top": y + "px"
                    });
                    // end

                },
                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 image

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

$("<br/><span id=\"" + newImageLoadedId + "\" class=\"remove\">Remove</span>").insertAfter(".masked-img" + newImageLoadedId).css({
    "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
    "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2 +25) + "px"
});

                $(".remove").click(function(event) {
                    const canvasId = "canvas#" + event.currentTarget.id;
                    // Delete the image
                    const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
                    ctx.fillStyle = "white"
                    ctx.fillRect(0, 0, 500, 500)
                    // Delete the Edit button
                    $(this).next().remove();
                    // Delete the Remove button
                    $(this).remove();
                    //$(this).edit();
                });

                  // Remove image code end here....
            };
            counter++;
        }

    }
    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.getImagePosition = function() {
            return {
                x: settings.x,
                y: settings.y,
                scale: settings.scale
            };
        };



        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
        })
        // Edit image
        div.addClass('masked-img' + settings.id);
        // code end
        return container;
    };
}(jQuery));
.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 { 
 background: #444;
 border: 1px solid black;
 color: white;
 text-align: center;
 cursor: pointer;
 position: absolute;
 z-index: 3;
}

.remove:hover {
 background: white;
 color: black;
}

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

.edit:hover {
 background: white;
 color: black;
 position: absolute;
 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;
}
<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>
Sami Ahmed Siddiqui
  • 2,328
  • 1
  • 16
  • 29
  • Thanks a lot, this worked fine.... but when user upload image 2 times, then we need to click `remove` text 2 times, is it possible for to restrict uploading image before user click on remove image as in this [link](https://stackoverflow.com/questions/55625892/upload-image-on-2nd-canvas-before-clearing-1st-canvas-image) –  Apr 11 '19 at 09:14
0

I have tested it successfully in your jsfiddle : just add $(".edit").remove();

$(".remove").click(function(event) {
    const canvasId = "canvas#" + event.currentTarget.id;
    // Delete the image
    const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
    ctx.fillStyle = "white"
    ctx.fillRect(0, 0, 500, 500)
    // Delete the Remove button
    $(this).remove();
    $(".edit").remove();
    //$(this).edit();
});
Sami Ahmed Siddiqui
  • 2,328
  • 1
  • 16
  • 29
sylvain
  • 853
  • 1
  • 7
  • 20
  • Thanks a lot , please upload image on both mask images in jsfiddle, then click on `remove` button, then `Edit` button present in both mask images will remove as in [video](https://drive.google.com/file/d/1395aXlbBjSWnUGBeyWZAwW6RWVgKtUAB/view), but i want to remove the `edit` button of that particular image.... that's okay , other solutions worked for me.... –  Apr 11 '19 at 09:21
  • but when user upload image 2 times, then we need to click remove text 2 times , is it possible for to restrict uploading image before user click on `remove` text as in this [link](https://stackoverflow.com/questions/55625892/upload-image-on-2nd-canvas-before-clearing-1st-canvas-image) –  Apr 11 '19 at 09:23
0

Your edit button is a sibling of remove button present after it. So, $(this).remove() will only remove the remove button and not edit. To specifically target the edit button use - $(this).next().find('.edit').remove() .

Working fiddle - https://jsfiddle.net/zoeb0udm/.

For not allowing uploading of files, if there exist already uploaded file. You can check the length of files attribute. If it is zero then allow uploading of file, else don't and inform user to first remove the selected file in order to proceed with new upload.

const file = document.querySelector('#fileItem');

file.addEventListener('click', function(e) {
    console.log('clicked');
    if(file.files.length !== 0) {
        e.preventDefault();
        alert('Please remove the selected file');
        return;
    }
    console.log('No files selected');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fileItem" type="file" multiple>
random
  • 7,756
  • 3
  • 19
  • 25
  • Thanks a lot, this worked fine.... but when user upload image 2 times, then we need to click `remove` text 2 times, is it possible for to restrict uploading image before user click on remove image as in this [link](https://stackoverflow.com/questions/55625892/upload-image-on-2nd-canvas-before-clearing-1st-canvas-image) –  Apr 11 '19 at 09:15
  • @vickeycolors - I have updated my answer. Please check. – random Apr 12 '19 at 08:19
  • Thanks for the update, i will try your suggestion & try to implement your logic in my code.... –  Apr 12 '19 at 09:09