Как получить изображение с кодировкой base64 из буфера обмена в Internet Explorer?

Question

Я много искал, но не нашел получение кодированных данных base64 из буфера обмена. Я могу поймать событие вставки, а затем назначить событие переменной с этим

clipBoard = e.clipboardData ? e.clipboardData : window.clipboardData; 

in chrome; я могу получить экран печати, который был клейстером, как этот

if (clipBoard.types[0] == "Files") { 
    var blob = clipBoard.items[0].getAsFile(); 

    var reader = new FileReader(); 
    reader.onload = function(event){ 
    console.log(event.target.result); 
    }; // data url! 
    reader.readAsDataURL(blob); 
} 

но в то есть переменная 11 CLIPBOARD не имеет «пунктов» или «типов». Я загружу этот сервер изображений, но я не получил данные с кодировкой base64.

Answer 1

Это возможно ... на любом сайте :) Однако, нет кросс-браузерного метода.

В Chrome и Opera (и, скорее всего, Safari, но я не могу проверить это сейчас), вы можете получить доступ к буферу обмена, как Вы написали в своем вопросе. Фактически, этот метод является лишь обходным решением для мешка Chromium Issue 31426.

Этот код реализует следующий код. Нажмите Alt-PrtScr, щелкните в поле редактора и вставьте. Я просто распечатываю данные изображения; Например, в реальной программе я мог бы отправить ее на мой сервер для дальнейшей обработки.

$(document).ready(function() { 
 
    
 
    $('#editor').on('paste', function (e) { 
 
    
 
    var orgEvent = e.originalEvent; 
 
    for (var i = 0; i < orgEvent.clipboardData.items.length; i++) { 
 
     if (orgEvent.clipboardData.items[i].kind == "file" && orgEvent.clipboardData.items[i].type == "image/png") { 
 
\t \t \t \t var imageFile = orgEvent.clipboardData.items[i].getAsFile(); 
 
\t \t \t \t var fileReader = new FileReader(); 
 
     
 
\t \t \t \t fileReader.onloadend = function() { 
 
    \t \t \t $('#result').html(fileReader.result); 
 
    \t \t \t } 
 
     
 
\t \t \t \t fileReader.readAsDataURL(imageFile); 
 
\t \t \t \t break; 
 
     } 
 
    } 
 
    }); 
 
    
 
});

#editor{ 
 
    width: 500px; 
 
    min-height: 40px; 
 
    border: solid 1px gray; 
 
    padding: 4px; 
 
} 
 
#resultcnt{ 
 
    width: 100%; 
 
    margin-top: 16px; 
 
} 
 
#result{ 
 
    display: block; 
 
    max-width: 90%; 
 
    margin: 16px 0 32px 0; 
 
    font-size: 12px; 
 
    color: blue; 
 
    overflow: visible; 
 
    word-break: break-all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='editor' contenteditable=true></div> 
 
<div id='resultcnt'>Copyed image src:<br /> 
 
    <div id='result'></div> 
 
<div>

В IE и Firefox вы можете достичь того же результата с использованием другого подхода.К счастью, у этих браузеров нет проблем с вставкой экрана печати в редактор, поэтому вам вообще не нужно обращаться к буферу. Вы просто слушаете событие вставки и используете интервал, который занимает момент времени, когда изображение уже создано, но все еще не отображается. Затем вы просто получаете источник изображения и пустым редактором.

Следующий код реализует этот алгоритм. Когда вы запустите его в IE или Firefox результат будет таким же, как результаты предыдущего анализа пробы в Chrome и Opera:

$(document).ready(function() { 
 
    
 
    $('#editor').on('paste', function (e) { 
 
    $('#editor').empty(); 
 
\t \t var waitToPastInterval = setInterval(function() { 
 
\t \t \t if ($('#editor').children().length > 0) { 
 
\t \t \t \t clearInterval(waitToPastInterval); 
 
     $('#result').html($('#editor').find('img')[0].src); 
 
     $('#editor').empty(); 
 
\t \t \t } 
 
\t \t }, 1); 
 
    }); 
 
    
 
});

#editor{ 
 
    width: 500px; 
 
    min-height: 40px; 
 
    border: solid 1px gray; 
 
    padding: 4px; 
 
} 
 
#resultcnt{ 
 
    width: 100%; 
 
    margin-top: 16px; 
 
} 
 
#result{ 
 
    display: block; 
 
    max-width: 90%; 
 
    margin: 16px 0 32px 0; 
 
    font-size: 12px; 
 
    color: blue; 
 
    overflow: visible; 
 
    word-break: break-all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='editor' contenteditable=true></div> 
 
<div id='resultcnt'>Copyed image src:<br /> 
 
    <div id='result'></div> 
 
<div>

Answer 2

Это возможно ... на надежных сайтах.

Видишь, буфер обмена IEData is pretty well defined. Он поддерживает только текст или URL-адрес. Ни WScript, ни ActiveXObject не обеспечивают лучший доступ к буферу.

Но вы можете использовать PowerShell для доступа .Net, в том числе Clipboard, который имеет приятный маленький метод GetImage(). Вызов PowerShell прост через WSH, равно как Base64 encoding.

В результате возникает проблема с извлечением извлеченных данных.

Обычно вы должны use a file, так как мы уже используем ActiveX. Но для демонстрации здесь я буду использовать реестр. Это избавляет нас от необходимости создавать FileSystemObject и обнаруживать временную папку.

html ниже возьмет любое изображение в буфере обмена, в base64, и положит его в <img>.

<!DOCTYPE html><meta charset="utf-8"><img width=500 /><script> 
try { 
    var doc = document, body = doc.body, shell = new ActiveXObject('WScript.shell'); 
    var key = 'HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer'; 
    var cmd = "function Get-ClipImg {Add-Type -AssemblyName 'System.Windows.Forms';"+ 
     "$s=New-Object System.IO.MemoryStream;"+ 
     "[System.Windows.Forms.Clipboard]::GetImage().Save($s,[System.Drawing.Imaging.ImageFormat]::Png);"+ 
     "[Microsoft.Win32.Registry]::SetValue('"+key+"','tmp_clipboard',[System.Convert]::ToBase64String($s.ToArray()))"+ 
    "} Get-ClipImg"; 
    shell.run('powershell -Command "'+cmd+'"', 0, true); 
    var data = shell.RegRead(key + '\\tmp_clipboard'); 
    shell.RegDelete(key + '\\tmp_clipboard'); 
    if (! data.trim()) body.textContent = 'Clipboard has no image'; 
    else doc.querySelector('img').src = 'data:image/png;base64,' + data; 
} catch (err) { body.textContent = err; } 
</script> 

Итак, вот вы, способ сделать изображение буфера обмена в IE без использования Flash или Java. Пока сайт доверен. (Локальный файл включен)

Или вы можете use Flash or Java.