Sajith Koleri Ответов: 0

Как вставить скриншот изображения в 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));
}


К сожалению, это все еще не все работает

PrakashCs.net

проверьте эту ссылку может быть вам поможет ссылка[^]

Sajith Koleri

Спасибо за ваш ответ .... я нашел другой способ, но есть некоторые проблемы ..можете ли вы посоветовать мне..ниже я вставляю это..

Sajith Koleri

мне не удалось заставить контроллер автоматически привязать опубликованные данные к параметру контроллера. Это, вероятно, возможно, но я нахожусь под некоторым давлением времени, поэтому я просто изучил входной поток HTTP-запроса и выбрал изображение оттуда.

0 Ответов