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

oknwwptz 于 2023-05-19 发布在 .NET

关注(0)|答案(2)|浏览(108)

我想让用户在网页上粘贴图像。在研究了Stack Overflow O之后，我确实找到了一种使用画布粘贴图像的方法，但是每次我在下拉列表中选择一个元素时，画布也会重置。还有别的办法吗我还需要得到的图像路径，我无法通过画布。

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

asp.net

来源：https://stackoverflow.com/questions/42087189/how-to-allow-user-to-paste-image-on-web-page

2条答案

按热度按时间

uz75evzq1#

将下拉列表添加到“更新”面板中。这样它就不会刷新整个页面，因此您粘贴的图像不会消失。
不然的话
请参考此链接。
http://www.c-sharpcorner.com/article/copying-and-pasting-on-clipboard-using-C-Sharp/
首先将图像存储在剪贴板中，然后在下拉选择更改后调用剪贴板图像并将其加载到图像框中。

赞(0）回复(0）举报 2023-05-19

zpgglvta2#

如果您有UpdatePanel，则每次触发自动回发时，所有内容都将重置。解决办法很简单。将数据存储在隐藏字段中：

<script type="text/javascript">                      
                function AlPegar(event) {
                    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
                    console.log(JSON.stringify(items));
                    var blob = null;
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].type.indexOf("image") === 0) {
                            blob = items[i].getAsFile();
                        }
                    }
                    if (blob !== null) {
                        var reader = new FileReader();
                        reader.onload = function (event) {
                            document.getElementById("<%= ImgPegar.ClientID %>").src = event.target.result;
                            document.getElementById("<%= HdnImagen.ClientID %>").value = event.target.result;
                        };
                        reader.readAsDataURL(blob);
                    }
                    else {
                        document.getElementById("<%= ImgPegar.ClientID %>").src = "";
                        document.getElementById("<%= HdnImagen.ClientID %>").value = "";
                    }
                };
            </script>
            <asp:TextBox ID="TxtPegar" runat="server" 
                TextMode="MultiLine" 
                Rows="2" 
                Columns="20" 
                onpaste="AlPegar(event)" 
                placeholder="Pegue aquí la imagen"
                OnTextChanged="TxtPegar_TextChanged" />
            <img id="ImgPegar" name="ImgPegar" src="" width="150" runat="server" />

<asp:HiddenField ID="HdnImagen" runat="server" />

在Page_Load上恢复图像

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        if (!IsPostBack)
        {

        }
        else
        {
            // Restore image after PostBack
            ImgPegar.Src = HdnImagen.Value;
        }
    }
    catch (Exception ex)
    {
        Bitacora.Guardar(ex);
        Response.Redirect(UtilsInet.UrlError, false);
    }
}

赞(0）回复(0）举报 2023-05-19

我来回答

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

2条答案

相关问题

热门标签

最新问答