Add and display image

Question

I would like to Add Photo and Display it on the page. At the same time, I can resize it and drag it around.

I was searching a lot of resources to apply it on my code, but none of them I did is working.

So here's the code I have:

$(function() {
  $(".fig_image").each(function() {
    var figSrc = $(this).data("image-src");
    $(this).css("background-image", "url('" + figSrc + "')");
  }).draggable({ containment:"#myWidget",
    helper:"clone",cursor: "move"   });

  $("#disp_card").droppable({ accept: ".fig_image",
    drop: function(e, ui) {
      console.log("Receving: ", ui.helper);
      if (!ui.helper.hasClass("placed")) {
        addFigure(ui.helper);  } }
  });

  // Utility Functions
  function addDed(txt) {
    var $close = $("<span>", {
      class: "floating top right ui-icon ui-icon-close",
      title: "Remove Image"
    }).click(function(e){ removeItem($(e.target).parent()); });
    
    var $dedTxt = $("<div>", {
      id: "ded-" + ($(".text").length + 1),
      class: "placed text"
    }).html(txt).append($close).css({
      position: "absolute"
    });
    makeDrag($dedTxt);
    makeResize($dedTxt);
    $dedTxt.disableSelection();
    $dedTxt.appendTo($("#disp_card")).fadeIn();
  }

  function addFigure($item) {
    var dropPos = $item.position();
    var dropSrc = $item.data("image-src");
    var dropPlace = {
      top: dropPos.top - $("#disp_card").position().top,
      left: dropPos.left - $("#disp_card").position().left
    };
    var $close = $("<span>", {
      class: "floating top right ui-icon ui-icon-close",
      title: "Remove Image"
    }).click(function(e) {
      removeItem($(e.target).parent());
    });
    var $image = $("<div>", {
      id: "fig-" + ($(".placed").length + 1),
      class: "placed image"
    }).data("image-source", dropSrc).css({
      "background-image": "url('" + dropSrc + "')",
      "background-repeat": "no-repeat",
      width: "200px", height: "250px",
      position: "absolute", top: dropPlace.top + "px",
      left: dropPlace.left + "px"
    }).append($close);
    $item.fadeOut(function() { //make items DRAGGABLE
      makeDrag($image); makeResize($image);
      $image.appendTo($("#disp_card")).fadeIn();
    });
  }

  function makeDrag($item) {
    $item.draggable({ containment: "#disp_card" });}

  function makeResize($item) {
    $item.resizable({
      containment: "#disp_card",
      minWidth: 50,
      aspectRatio: !$item.hasClass("text"),
      start: function(e, ui) {
        if ($item.hasClass("text")) {
          $item.css("border", "1px dashed #ccc");
        }
      },
      resize: function(e, ui) { //for TEXT
        if ($item.hasClass("text")) {
          switch (true) { case (ui.size.height < 16):
              $item.css("font-size", "11pt");
              break; }
        } else {
          $item.css("background-size", ui.size.width + "px " + ui.size.height + "px");
        }
      },
      stop:function(e,ui) {if ($item.hasClass("text")) 
      {$item.css("border", "0");} }
    });
  }

  function removeItem($item) {
    console.log("Remove Item: ", $item);
    $item.fadeOut(function() {
      $item.remove(); });
  }

  function createPreview() {
    $imageContent = [];
    var ctx = $("#preview_image")[0].getContext("2d");
    ctx.clearRect(0, 0, 600, 400);
    var $source = $("#disp_card");
    // Find and draw Text items
    var $text = $source.find(".text");
    var $det = {};
    var img;
    $text.each(function(ind, el) {
      $det.type = "Text";
      $det.top = parseInt($(el).css("top").slice(0, -2));
      $det.left = parseInt($(el).css("left").slice(0, -2));
      $det.width = $(el).width();
      $det.height = $(el).height();
      $det.content = $(el).text();
      $imageContent.push($det);
     //console.log("Adding to Image: ", $det);
      ctx.font = $det.font.size + " " + $det.font.family;
      ctx.textAlign = $det.font.align;
      ctx.textBaseline = "top";
      ctx.fillText($det.content, $det.left, $det.top, $det.width);
      $det = {};
    });

    // Find and draw Image items
    var $images = $source.find(".image");
    $det = {};
    $images.each(function(ind, el) {
      var $det = {};
      $det.type = "Image";
      $det.top = parseInt($(el).css("top").slice(0, -2));
      $det.left = parseInt($(el).css("left").slice(0, -2));
      $det.width = $(el).width();
      $det.height = $(el).height();
      $det.src = {};
      $det.src.url = $(el).data("image-source");
      $imageContent.push($det);
      img = new Image();
      img.src = $det.src.url;
      $det.src.width = img.width;
      $det.src.height = img.height;
      $det.ratio = $det.width / img.width;
      $(img).on("load", function() {
        console.log("Adding to Image: ", $det);
        ctx.drawImage(img, $det.left, $det.top, $det.src.width * $det.ratio, $det.src.height * $det.ratio);
        $det = {}; });
    });
  }

  //Button Action to Display Image
  $("#add_img").click(function(e) {
    e.preventDefault();
     $("#disp_card").html("");
  });
});

#myWidget { width: 1110px; margin: 0 auto;}
#myWidget:after { content: "";  display: table; clear: both;}
#myWidget div.left { float: left; width: 400px;}
#myWidget div.right { float: right; width: 606px;}
#myWidget input,
#myWidget select {
  border: 1px solid #ccc;
  height: 25px; padding: 2px;
  border-radius: 4px; font-size: 1em;}
#myWidget .button {
  padding: 0.2em 0.3em; margin: 4px 1px;}
#myWidget .button.default {
  font-weight: bold; border-color: #9f9f9f;}
#myWidget .ui-widget-header {
  padding: 0.25em 0;
  padding-left: 20px; }
#myWidget .right .ui-widget-header {
  padding: 0.25em 0; text-align: center; }
#myWidget .ui-widget-content {padding: 5px;}
#myWidget #fig_list {
  list-style: none;
  height: 60px; padding: 0; margin: 0; }
#myWidget #fig_list li { float: left; }
#myWidget .fig_image {
  border: 1px solid #ccc; border-radius: 6px;
  width: 50px; height: 50px;
  background-repeat: no-repeat;
  background-size: 50px; margin-right: 7px;
  padding: 2px; }
#myWidget .disp_temp {
  width: 598px; height: 398px;
  border: 1px solid #eee; position: relative;}
#myWidget .disp_temp span { position: absolute; }
.no-title .ui-dialog-titlebar {
  display: none; }
  .small-title .ui-dialog-titlebar {
  height: 1.25em;
  font-size: 0.75em}
.small-title .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button { padding: 0.125em; }

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<div id="myWidget" class="ui-widget"> <div class="left column">
    <div class="ui-widget-header ui-corner-top">
      A. Figures  <input type="file" name="add_img"/>
    </div>
    <div class="ui-widget-content ui-corner-bottom">
      <ul id="fig_list"> <li>
          <div class="fig_image" data-image-src="https://vignette1.wikia.nocookie.net/doratheexplorer/images/8/88/Dora_Exploradora_(11).png/revision/latest?cb=20130928190347" title="Dora">
          </div> </li>
        <li> <div class="fig_image" data-image-src="https://vignette1.wikia.nocookie.net/angrybirds/images/f/f7/Red_shoked_3.png/revision/latest?cb=20130505082125" title="Angry Bird">
          </div> </li> </ul> </div>
  </div>
  <div class="right column">
    <div class="ui-widget-header ui-corner-top">DISPLAY PICTURE</div>
    <div class="ui-widget-content ui-corner-bottom">
      <div id="disp_card" class="disp_temp"></div></div>
  </div>
  
</div>

Sorry I just need to put everything so the drag and drop will work. I just found this some set of codes online then combined it. I ended up being confused since I'm not expert with jquery.

Hope someone could help me out to point my mistake or need to change. Thank you so much for you response.!!

take a look on my answer now. Working version on codepen link. — vlk
– vlk, Commented Apr 23, 2017 at 10:04

vlk · Accepted Answer · 2017-04-23 09:42:48Z

You can use the .change function on the file select input to trigger an action to append a new div with the selected file data-img-src.

UPDATE

I've fixed it to do what you want, you can add a new file and than drag it and resize. It's not working on Stack Overflow snippet but you can try it here https://codepen.io/VLK_STUDIO/pen/PmzyRj

function setAll() {
  $(".fig_image").each(function() {
    var figSrc = $(this).data("image-src");
    $(this).css("background-image", "url('" + figSrc + "')");
  }).draggable({ containment:"#myWidget",
    helper:"clone",cursor: "move"   });

  $("#disp_card").droppable({ accept: ".fig_image",
    drop: function(e, ui) {
      console.log("Receving: ", ui.helper);
      if (!ui.helper.hasClass("placed")) {
        addFigure(ui.helper);  } }
  });

  // Utility Functions
  function addDed(txt) {
    var $close = $("<span>", {
      class: "floating top right ui-icon ui-icon-close",
      title: "Remove Image"
    }).click(function(e){ removeItem($(e.target).parent()); });
    
    var $dedTxt = $("<div>", {
      id: "ded-" + ($(".text").length + 1),
      class: "placed text"
    }).html(txt).append($close).css({
      position: "absolute"
    });
    makeDrag($dedTxt);
    makeResize($dedTxt);
    $dedTxt.disableSelection();
    $dedTxt.appendTo($("#disp_card")).fadeIn();
  }

  function addFigure($item) {
    var dropPos = $item.position();
    var dropSrc = $item.data("image-src");
    var dropPlace = {
      top: dropPos.top - $("#disp_card").position().top,
      left: dropPos.left - $("#disp_card").position().left
    };
    var $close = $("<span>", {
      class: "floating top right ui-icon ui-icon-close",
      title: "Remove Image"
    }).click(function(e) {
      removeItem($(e.target).parent());
    });
    var $image = $("<div>", {
      id: "fig-" + ($(".placed").length + 1),
      class: "placed image"
    }).data("image-source", dropSrc).css({
      "background-image": "url('" + dropSrc + "')",
      "background-repeat": "no-repeat",
      width: "200px", height: "250px",
      position: "absolute", top: dropPlace.top + "px",
      left: dropPlace.left + "px"
    }).append($close);
    $item.fadeOut(function() { //make items DRAGGABLE
      makeDrag($image); makeResize($image);
      $image.appendTo($("#disp_card")).fadeIn();
    });
  }

  function makeDrag($item) {
    $item.draggable({ containment: "#disp_card" });}

  function makeResize($item) {
    $item.resizable({
      containment: "#disp_card",
      minWidth: 50,
      aspectRatio: !$item.hasClass("text"),
      start: function(e, ui) {
        if ($item.hasClass("text")) {
          $item.css("border", "1px dashed #ccc");
        }
      },
      resize: function(e, ui) { //for TEXT
        if ($item.hasClass("text")) {
          switch (true) { case (ui.size.height < 16):
              $item.css("font-size", "11pt");
              break; }
        } else {
          $item.css("background-size", ui.size.width + "px " + ui.size.height + "px");
        }
      },
      stop:function(e,ui) {if ($item.hasClass("text")) 
      {$item.css("border", "0");} }
    });
  }

  function removeItem($item) {
    console.log("Remove Item: ", $item);
    $item.fadeOut(function() {
      $item.remove(); });
  }

  function createPreview() {
    $imageContent = [];
    var ctx = $("#preview_image")[0].getContext("2d");
    ctx.clearRect(0, 0, 600, 400);
    var $source = $("#disp_card");
    // Find and draw Text items
    var $text = $source.find(".text");
    var $det = {};
    var img;
    $text.each(function(ind, el) {
      $det.type = "Text";
      $det.top = parseInt($(el).css("top").slice(0, -2));
      $det.left = parseInt($(el).css("left").slice(0, -2));
      $det.width = $(el).width();
      $det.height = $(el).height();
      $det.content = $(el).text();
      $imageContent.push($det);
     //console.log("Adding to Image: ", $det);
      ctx.font = $det.font.size + " " + $det.font.family;
      ctx.textAlign = $det.font.align;
      ctx.textBaseline = "top";
      ctx.fillText($det.content, $det.left, $det.top, $det.width);
      $det = {};
    });

    // Find and draw Image items
    var $images = $source.find(".image");
    $det = {};
    $images.each(function(ind, el) {
      var $det = {};
      $det.type = "Image";
      $det.top = parseInt($(el).css("top").slice(0, -2));
      $det.left = parseInt($(el).css("left").slice(0, -2));
      $det.width = $(el).width();
      $det.height = $(el).height();
      $det.src = {};
      $det.src.url = $(el).data("image-source");
      $imageContent.push($det);
      img = new Image();
      img.src = $det.src.url;
      $det.src.width = img.width;
      $det.src.height = img.height;
      $det.ratio = $det.width / img.width;
      $(img).on("load", function() {
        console.log("Adding to Image: ", $det);
        ctx.drawImage(img, $det.left, $det.top, $det.src.width * $det.ratio, $det.src.height * $det.ratio);
        $det = {}; });
    });
  }

  //Button Action to Display Image
  $("#add_img").click(function(e) {
    e.preventDefault();
     $("#disp_card").html("");
  });
};

$("#addImg").change(function(){
	var files =  $(this)[0].files;
	var num = $(".fig_image").children().length;
	for (var i = 0, f; f = files[i]; i++) {
		var reader = new FileReader();

		reader.onloadend = function( response ){

			var image = response.target.result;
			var html = '<div class="fig_image" ';
			html += 'data-image-src="'+ image +'" style="height:50px; width: 50px; ; background-size:contain; background-position: center center;">';
      
      var div = $("<li></li>", {
				html: html
			});
      
			$("#fig_list").append( div );
			
      setTimeout(function(){
      setAll();
      }, 500);
		};

		reader.readAsDataURL(f);
	}
  
});

setAll();

#myWidget { width: 1110px; margin: 0 auto;}
#myWidget:after { content: "";  display: table; clear: both;}
#myWidget div.left { float: left; width: 400px;}
#myWidget div.right { float: right; width: 606px;}
#myWidget input,
#myWidget select {
  border: 1px solid #ccc;
  height: 25px; padding: 2px;
  border-radius: 4px; font-size: 1em;}
#myWidget .button {
  padding: 0.2em 0.3em; margin: 4px 1px;}
#myWidget .button.default {
  font-weight: bold; border-color: #9f9f9f;}
#myWidget .ui-widget-header {
  padding: 0.25em 0;
  padding-left: 20px; }
#myWidget .right .ui-widget-header {
  padding: 0.25em 0; text-align: center; }
#myWidget .ui-widget-content {padding: 5px;}
#myWidget #fig_list {
  list-style: none;
  height: 60px; padding: 0; margin: 0; }
#myWidget #fig_list li { float: left; }
#myWidget .fig_image {
  border: 1px solid #ccc; border-radius: 6px;
  width: 50px; height: 50px;
  background-repeat: no-repeat;
  background-size: 50px; margin-right: 7px;
  padding: 2px; }
#myWidget .disp_temp {
  width: 598px; height: 398px;
  border: 1px solid #eee; position: relative;}
#myWidget .disp_temp span { position: absolute; }
.no-title .ui-dialog-titlebar {
  display: none; }
  .small-title .ui-dialog-titlebar {
  height: 1.25em;
  font-size: 0.75em}
.small-title .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button { padding: 0.125em; }

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<div id="myWidget" class="ui-widget"> <div class="left column">
    <div class="ui-widget-header ui-corner-top">
      A. Figures  <input id="addImg" type="file" name="add_img"/>
    </div>
    <div class="ui-widget-content ui-corner-bottom">
      <ul id="fig_list"> <li>
          <div class="fig_image" data-image-src="https://vignette1.wikia.nocookie.net/doratheexplorer/images/8/88/Dora_Exploradora_(11).png/revision/latest?cb=20130928190347" title="Dora">
          </div> </li>
        <li> <div class="fig_image" data-image-src="https://vignette1.wikia.nocookie.net/angrybirds/images/f/f7/Red_shoked_3.png/revision/latest?cb=20130505082125" title="Angry Bird">
          </div> </li> </ul> </div>
  </div>
  <div class="right column">
    <div class="ui-widget-header ui-corner-top">DISPLAY PICTURE</div>
    <div class="ui-widget-content ui-corner-bottom">
      <div id="disp_card" class="disp_temp"></div></div>
  </div>
  
</div>

Collectives™ on Stack Overflow

Add and display image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related