Форумы портала PHP.SU :: Версия для печати :: Как получить изображение из буфера обмена?

1. Ник Бондарчук - 10 Мая, 2017 - 14:11:17 - перейти к сообщению

Здравствуйте, как сделать так чтобы при нажатии CTRL + V (Вставить) высвечивалась форма с изображением из буфера обмена, а потом отсылалась?
Главное мне надо получить саму картинку и узнать код для этого.
Буду благодарен если поможете Радость

2. caballero - 10 Мая, 2017 - 15:23:27 - перейти к сообщению

где высвечивалась? В воздухе?
всегда есть какой то элемент куда вставляется данные с клипборда

3. armancho7777777 - 10 Мая, 2017 - 16:29:34 - перейти к сообщению

CODE (html):
скопировать код в буфер обмена

<style>
    .previews img { vertical-align: top; max-width: 200px }
    .previews { margin-top: 20px }
</style>
 
<form id="my-form" action="#">
    <input id="image-field" name="images[]" size="30" readonly
            placeholder="Paste the image from clipboard...">
    <button>send</button>
    <div id="previews" class="previews"></div>
</form>
<pre id="response"></pre>

CODE (javascript):
скопировать код в буфер обмена

(function(doc){
 
    var form      = doc.querySelector('#my-form'),
        field     = form.querySelector('#image-field'),
        previews  = form.querySelector('#previews'),
        respElem  = doc.querySelector('#response'),
        fieldName = field.name,
        files     = [],
 
        previewClear = function(){
            each(previews.children, function(child){
                previews.removeChild(child);
            });
        },
 
        each = function(elems, callBack){
            return [].forEach.call(elems, callBack);
        };
 
    field.removeAttribute('name');
    field.autocomplete = 'off';
 
    field.addEventListener('paste', function(e){
 
        respElem.innerHTML = '';
        previewClear();
        files = [];
 
        each(e.clipboardData.files, function(file){
            if(!/^image\/.+$/.test(file.type)) return;
            var preview = doc.createElement('img');
            preview.src = URL.createObjectURL(file);
            previews.appendChild(preview);
            field.value = file.name;
            files.push(file);
        });
 
    });
 
    form.addEventListener('reset', function(){
        previewClear();
        files = [];
    });
 
    form.addEventListener('submit', function(e){
 
        e.preventDefault();
 
        var formData = new FormData(form),
            xhr = new XMLHttpRequest();
 
        xhr.addEventListener('load', function(e){
            respElem.innerHTML = e.target.response;
            form.reset();
        });
 
        each(files, function(file){
            formData.append(fieldName, file);
        });
 
        xhr.open('POST', form.action, true);
        xhr.send(formData);
 
    });
 
})(document);