Как вставить скриншот изображения в textarea в mvc4, как skype..
как вставить скриншот изображения в textarea в MVC4, как skype..
Шаг 1-Нажмите клавишу "print screen"
Шаг 2 - "ctrl + v" в текстовую область
Что я уже пробовал:
Во-первых, я запечатлел событие вставки на вашей веб-странице. Это делается с помощью специфичного для Chrome Javascript для обработки события paste и jquery для отправки изображения на сервер через 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); } } } } }
Как только вы настроили вызовы paste и AJAX, пользователь вставляет изображение, а затем вызов AJAX отправляет ваше изображение в кодировке base64 на сервер. Вот фактический контент, отправленный в 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)); }
К сожалению, это все еще не все работает
Sajith Koleri
Спасибо за ваш ответ .... я нашел другой способ, но есть некоторые проблемы ..можете ли вы посоветовать мне..ниже я вставляю это..
Sajith Koleri
мне не удалось заставить контроллер автоматически привязать опубликованные данные к параметру контроллера. Это, вероятно, возможно, но я нахожусь под некоторым давлением времени, поэтому я просто изучил входной поток HTTP-запроса и выбрал изображение оттуда.