Bild hinzufügen und anzeigen

Question

Ich möchte Foto hinzufügen und auf der Seite anzeigen. Gleichzeitig kann ich die Größe ändern und es ziehen.

Ich suchte eine Menge Ressourcen, um es auf meinen Code anzuwenden, aber keiner von ihnen arbeitete ich.

Also hier ist der Code, den ich habe:

$(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, ich brauche nur alles zu setzen, so dass die Drag & Drop funktioniert. Ich habe gerade einige Codes online gefunden und dann kombiniert. Ich war verwirrt, da ich kein Experte für jQuery bin.

Hoffe jemand könnte mir helfen, meinen Fehler zu zeigen oder zu ändern. Vielen Dank für Ihre Antwort. !!

Answer 1

Sie können die Funktion .change auf der Dateiauswahleingabe verwenden, um eine Aktion zum Anhängen einer neuen div mit der ausgewählten Datei data-img-src auszulösen.

UPDATE

ich es behoben haben zu tun, was Sie wollen, können Sie eine neue Datei hinzufügen, und als es ziehen und die Größe. Es funktioniert nicht auf Stack-Überlauf-Schnipsel aber man kann es versuchen, hier 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>