如何将截图图像粘贴到mvc4中的textarea中，如skype .. [英] How do I paste a screenshot image into textarea in mvc4 like skype..

问题描述

如何将截图图像粘贴到MVC4中的textarea中，如skype ..



步骤1单击打印屏幕键

步骤2'ctrl + v'到textarea



我尝试过：



首先，我已经在您的网页上捕获了粘贴事件。这是使用一些特定于Chrome的Javascript来处理粘贴事件，以及jquery通过AJAX将图像发送到服务器。

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);
                }
            }
        }
    }
}

一旦你获得了粘贴和AJAX调用设置，用户粘贴图像，然后AJAX调用将base64编码的图像发送到服务器。以下是HTTP POST中发送的实际内容：

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

推荐答案

.ajax（{
type： POST，
url：< span class =code-string>' / Knowledge / Screencap'，
data：event.target.result，
成功： function （resultHtml）{
// 显示上传的图像

.ajax({ type: "POST", url: '/Knowledge/Screencap', data: event.target.result, success: function (resultHtml) { // Show the uploaded image

（ ＃screencap-container ）。html（resultHtml）;
}
}）;
};

// 将blob从剪贴板转换为base64
< span class =code-comment> // 完成后，reader.onload事件将触发
reader.readAsDataURL（blob）;
}
}
}
}
}

("#screencap-container").html(resultHtml); } }); }; // Convert the blob from clipboard to base64 // After this finishes, reader.onload event will fire reader.readAsDataURL(blob); } } } } }

一旦你获得了粘贴和AJAX调用设置，用户粘贴图像，然后AJAX调用将base64编码的图像发送到服务器。以下是HTTP POST中发送的实际内容：

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

这篇关于如何将截图图像粘贴到mvc4中的textarea中，如skype ..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！