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;
if (k == 17) {
if (ctrl_pressed == false)
ctrl_pressed = true;
if (!window.Clipboard)
pasteCatcher.focus();
}
}
function on_keyboardup_action(event) {
if (k == 17)
ctrl_pressed = false;
}
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++) {
if (items[i].type.indexOf("image") !== -1) {
var blob = items[i].getAsFile();
var reader = new FileReader();
reader.önload = function (event) {
$.ajax({
type: "POST",
url: '/Knowledge/Screencap',
data: event.target.result,
success: function (resultHtml) {
$("#screencap-container").html(resultHtml);
}
});
};
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()
{
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 Content(PathManager.ToUrl(saveToPath));
}
Unfortunately it's still not all working