添加和顯示圖像

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。

UPDATE

我已經固定它做你想要什麼，你可以添加一個新的文件，比拖動和縮放。它不工作的堆棧溢出片段，但你可以嘗試在這裏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(){ 
 
\t var files = $(this)[0].files; 
 
\t var num = $(".fig_image").children().length; 
 
\t for (var i = 0, f; f = files[i]; i++) { 
 
\t \t var reader = new FileReader(); 
 

 
\t \t reader.onloadend = function(response){ 
 

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

 
\t \t reader.readAsDataURL(f); 
 
\t } 
 
    
 
}); 
 

 
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>