添加并显示图像

Question

我想在页面上添加照片并显示它。 与此同时，我可以调整它并将其拖动。

我正在搜索大量资源以将其应用于我的代码，但我所做的一切都没有用。

所以这是我的代码：

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

抱歉，我只需要放置所有东西，这样拖放就可以了。 我刚刚在网上找到了一些代码，然后将它组合在一起。 因为我不是jquery的专家，所以我最终感到困惑。

希望有人可以帮助我指出我的错误或需要改变。 非常感谢你的回复。!!

Answer 1

您可以使用文件选择输入上的.change函数触发一个动作，用所选文件data-img-src附加一个新的div。

<强>更新

我已修复它以执行您想要的操作，您可以添加新文件，然后拖动它并调整大小。它不适用于Stack Overflow片段，但您可以在此处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>