How do I paste a screenshot image into textarea in mvc4 like skype..

See more:

jQuery

C#3.5

MVC4

how do I paste a screenshot image into textarea in MVC4 like skype..

step 1-click 'print screen' key
step 2- 'ctrl + v' to textarea

What I have tried:

First, I've captured the paste event on your web page. This is done using some Chrome-specific Javascript to handle the paste event, and jquery to send the image to the server via AJAX.

document.onkeydown = function (e) { return on_keyboard_action(e); }
document.onkeyup = function (e) { return on_keyboardup_action(e); }

var ctrl_pressed = false;

function on_keyboard_action(event) {
    k = event.keyCode;
    //ctrl
    if (k == 17) {
        if (ctrl_pressed == false)
            ctrl_pressed = true;
        if (!window.Clipboard)
            pasteCatcher.focus();
    }
}

function on_keyboardup_action(event) {
//ctrl
if (k == 17)
    ctrl_pressed = false;
}

// Paste in from Chrome clipboard
window.addEventListener("paste", pasteHandler);

function pasteHandler(e) {
    if (e.clipboardData) {
        var items = e.clipboardData.items;

        if (items) {
            for (var i = 0; i < items.length; i++) {

                // Only process anything if we have an image
                if (items[i].type.indexOf("image") !== -1) {
                    // Get the pasted item as a File Blob
                    var blob = items[i].getAsFile();
  
                    // Reader will read the file
                    var reader = new FileReader();

                    // This fires after we have a base64 load of the file                          
                
                    reader.önload = function (event) {
                        // Once reader loads, sent the blob to the server
                        $.ajax({
                        type: "POST",
                        url: '/Knowledge/Screencap',
                        data: event.target.result,
                            success: function (resultHtml) {
                                // Show the uploaded image
                                 $("#screencap-container").html(resultHtml);
                             }
                        });
                    };

                    // Convert the blob from clipboard to base64
                    // After this finishes, reader.onload event will fire
                    reader.readAsDataURL(blob);
                }
            }
        }
    }
}

Once you've got the paste and AJAX calls set up, the user pastes an image, and then the AJAX call sends your base64 encoded image to the server. Here's the actual content sent in the HTTP POST:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVYAAA...

public ActionResult Screencap()
{
    // Get the raw input stream (return to the start of the stream first!)
    Request.InputStream.Position = 0;
    string payload = new StreamReader(Request.InputStream).ReadToEnd();

    string indicator = "base64,";
    int imageStartIdx = payload.IndexOf(indicator);
    if (imageStartIdx >= 0)
    {
        string base64Image = payload.Substring(imageStartIdx + indicator.Length);
        byte[] fileBytes = Convert.FromBase64String(base64Image);
        System.IO.File.WriteAllBytes(saveToPath, fileBytes);
    }

    // Return the URL of the newly saved file for display on the browser
    return Content(PathManager.ToUrl(saveToPath));
}

Unfortunately it's still not all working