1
\$\begingroup\$

I am Displaying mask images & allowing user to upload the custome image inside mask image, now i want to give an option for user to Edit & Delete the Uploaded image....

Video link : https://drive.google.com/file/d/158RCO_NaXUg9KWOKSX6_SQ5r0CYF40oK/view

For that I need to create Pop up box once user click on Edit button, Also in the pop up i need to give an option to zoom, rotate the uploaded images....

for these i need to add lot of html code in future inside jquery, so is this is good way ? because i dont want to right more html code inside jquery as it looks bad when reading....

                    $("<span class=\"pip\">" +                    
                    "<br/><span id="open" class=\"edit\">Edit </span>" +
                    "<br/><span class=\"remove\">Remove </span>" +
                    "</span>").insertAfter("#fileup");

Or Is it possible to write Html code outside script ?

Here is full code in pen : https://codepen.io/kidsdial/pen/drLwVO

Here is jsfiddle : https://jsfiddle.net/kidsdial1/86Leb4gw/3/

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

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" : "ax0HVTs.png",
              "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" : "hEM2kEP.png",
              "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() {

    // upload image onclick

    $('.container').click(function(e) {
  // filtering out non-canvas clicks
  if (e.target.tagName !== 'CANVAS') return;

  // getting absolute points relative to container
  const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
  const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;

  const $canvasList = $(this).find('canvas');
  // moving all canvas parents on the same z-index
  $canvasList.parent().css({zIndex: 0});

  $canvasList.filter(function () { // filtering only applicable canvases
    const bbox = this.getBoundingClientRect()
    return (
      absX >= bbox.left && absX <= bbox.left + bbox.width &&
      absY >= bbox.top && absY <= bbox.top + bbox.height)
  }).each(function () { // checking white in a click position
    const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
    const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
    const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
    if (pixel[3] === 255) {
      $(this).parent().css({zIndex: 2})
      target = this.id;
      console.log(target);
      setTimeout(() => {
        $('#fileup').click();
      }, 20);
    }
  })
});
	
	
    function getAllSrc(layers) {
        let arr = [];
        layers.forEach(layer => {
            if (layer.src) {
                arr.push({
                    src: layer.src,
                    x: layer.x,
                    y: layer.y,
					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\">" +                    
					"<br/><span id=\"myBtn\" class=\"edit\">Edit </span>" +
                    "<br/><span class=\"remove\">Remove </span>" +
                    "</span>").insertAfter("#fileup");

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

                // Remove image	code ended here....	
													
                };
                counter++;
				// get the text
				
            }
drawText(data);
        }

json(jsonData);
}); // end of document ready


// extempl code - get the text

const fonts = []; // caching duplicate fonts

function drawText(layer) {

    if (layer.type === 'image') return;

    if (!layer.type || layer.type === 'group') {
        return layer.layers.forEach(drawText)
    }

    if (layer.type === 'text') {
        const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;

        if (!fonts.includes(url)) {
            fonts.push(url);
            $("style").prepend("@font-face {\n" +
                "\tfont-family: \"" + layer.font + "\";\n" +
                "\tsrc: url(" + url + ") format('truetype');\n" +
                "}");
        }

$('.container').append(
            '<div class="txtContainer" ' +
            'style="' +
			'text-align: ' + layer.justification + '; ' +
			'font-family: ' + layer.font + '; ' +
            'left: ' + layer.x + 'px; ' +
            'top: ' + layer.y + 'px; ' +
			'width:' + layer.width + 'px; ' +
            'color: ' + layer.color.replace(/^0x/, '#') + '; ' +						
            'font-size: ' + layer.size + 'px; ' +
             'height:' + layer.height + 'px;' +
            '">' +
            layer.text +
            '</div>');
    }

}
// extempl code end	

// 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;
}
.edit {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.edit: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>

\$\endgroup\$
  • 1
    \$\begingroup\$ What does this code do? Please tell us. See How to Ask. \$\endgroup\$ – 200_success Mar 26 at 15:53
  • \$\begingroup\$ What is your requirement? and what you are trying to do from business/exercise point of view in this code? Your title is vague and therefore your question becomes harder to answer. \$\endgroup\$ – 422_unprocessable_entity Mar 26 at 17:02
2
\$\begingroup\$

You can write your Templates as plain HTML (invisible) and then clone, adapt and insert them as you want.

HTML5 has even an extra template tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

<div id='demoTemplate' style='display: none;'>
 <span class='pip'>                    
  <br/><span class='edit'>Edit </span>
  <br/><span class='remove'>Remove </span>
 </span>
</div>
<!-- or -->
<template id='demoTemplate'>
 <span class='pip'>                    
  <br/><span class='edit'>Edit </span>
  <br/><span class='remove'>Remove </span>
 </span>
</template>
<input id='fileup' name='fileup' type='file' style='display:none'>

<script>
  // This copies also div-style='display:none', either remove the style or the outer div/template
  $('#demoTemplate').clone().insertAfter('#fileup');

  // or even something like this
  $($('#demoTemplate').html()).insertAfter('#fileup');
</script>
```
\$\endgroup\$
  • \$\begingroup\$ thanks, instead of writing as template, is there any other way i can write the html code outside <Script> tag & still make it work for editing & deleting uploaded images? \$\endgroup\$ – vickey colors Mar 28 at 10:23
  • \$\begingroup\$ can we still use same concept if we have css styles as in this code : pastebin.com/EextDCzF , here i included that code in codepen : codepen.io/kidsdial/pen/axdgJR \$\endgroup\$ – vickey colors Apr 4 at 13:20
  • \$\begingroup\$ also can we use same concept if i have code like this : "<br/><span style =\"left: layer.x + 'px;'\" class=\"edit\" >Edit </span>" + , because i have left: layer.x + 'px; , as in html <style> : left:layer.x will not work..... how to handle these cases , how to write in better way ? \$\endgroup\$ – vickey colors Apr 5 at 13:43
  • \$\begingroup\$ how to handle these kind of things ? \$\endgroup\$ – vickey colors Apr 15 at 7:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.