user3132148 user3132148 - 2 years ago 98
ASP.NET (C#) Question

How to allow user to paste image on web page?

I want to allow user to paste image on web page. After researching on Stack Overflow O did find a way to paste image using canvas but every time I select an element in drop down the canvas also gets reset. Is there any other way I can do that? I also need to get the path of image which I'm unable to get through 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 ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
Welcome to ASP.NET!
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
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);
//draw pasted object
function paste_createImage(source) {
var pastedImage = new Image();
pastedImage.onload = function () {
ctx.drawImage(pastedImage, 0, 0);
pastedImage.src = source;


Answer Source

Add the Dropdown into the Update panel. So that it will not refresh the whole page, hence your pasted image will not disappear.

Or else

Please Refer on this link.

First store image in clip board, then after dropdown selection changed call the clipboard image and load it into the image box.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download