Question

我想允许用户在网页上粘贴图片。在研究Stack Overflow之后，O确实找到了一种使用canvas粘贴图像的方法，但每次我在下拉菜单中选择一个元素时，画布也会被重置。有没有其他方法可以做到这一点？我还需要获得我无法通过画布获取的图像路径。

<%@ 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

将“下拉列表”添加到“更新”面板中。因此它不会刷新整个页面，因此粘贴的图像不会消失。

否则

请参阅此链接。

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

首先在剪贴板中存储图像，然后在下拉选择更改后调用剪贴板图像并将其加载到图像框中。

如何允许用户在网页上粘贴图片？

1 个答案: