Wie kann der Benutzer Bilder auf Webseiten einfügen?

Question

Ich möchte dem Benutzer erlauben, Bild auf Webseite einzufügen. Nach der Untersuchung von Stack Overflow fand ich eine Möglichkeit, Bilder mit Canvas einzufügen, aber jedes Mal, wenn ich ein Element im Drop-down-Menü auswähle, wird auch die Leinwand zurückgesetzt. Kann ich das anders machen? Ich brauche auch den Weg des Bildes, den ich nicht durch die Leinwand bekomme.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
 
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> 
 

 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
 
</asp:Content> 
 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
 
    <h2> 
 
     Welcome to ASP.NET! 
 
    </h2> 
 
    1. Copy image data into clipboard or press Print Screen <br> 
 
2. Press Ctrl+V (page/iframe must be focused): 
 
<br /><br /> 
 
<canvas contenteditable style="border:1px solid grey;" id="cc" width="200" height="200"> 
 
<script type="text/javascript"> 
 
    var canvas = document.getElementById("cc"); 
 
    var ctx = canvas.getContext("2d"); 
 

 
    //=== Clipboard =============================== 
 

 
    window.addEventListener("paste", pasteHandler); //chrome 
 
    //handler 
 
    function pasteHandler(e) { 
 
     if (e.clipboardData == false) return false; //empty 
 
     var items = e.clipboardData.items; 
 
     if (items == undefined) return false; 
 
     for (var i = 0; i < items.length; i++) { 
 
      if (items[i].type.indexOf("image") == -1) continue; //not image 
 
      var blob = items[i].getAsFile(); 
 
      var URLObj = window.URL || window.webkitURL; 
 
      var source = URLObj.createObjectURL(blob); 
 
      paste_createImage(source); 
 
     } 
 
    } 
 
    //draw pasted object 
 
    function paste_createImage(source) { 
 
     var pastedImage = new Image(); 
 
     pastedImage.onload = function() { 
 
      ctx.drawImage(pastedImage, 0, 0); 
 
     } 
 
     pastedImage.src = source; 
 
    } 
 

 
</script> 
 
</asp:Content>

Answer 1

das Dropdown in den Update-Panel hinzufügen. Damit die gesamte Seite nicht aktualisiert wird, verschwindet das eingefügte Bild nicht.

Oder sonst

Bitte beziehen Sie sich auf diesen Link.

http://www.c-sharpcorner.com/article/copying-and-pasting-on-clipboard-using-C-Sharp/

Erstes Laden Bild in Clip-Board, dann nach Drop-Down-Auswahl geändert, um die Zwischenablage Bild aufrufen und in das Bildfeld zu laden.