Скопировать изображение в буфер обмена

Похоже, вы не можете (пока) программно скопировать изображение в буфер обмена из веб-приложения JavaScript?

Я попытался скопировать текст в буфер обмена, и он сработал.

Теперь я хотел бы скопировать изображение и после нажатия ctrl + v вставить в Word или Excel или Paint.

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#container1"), {
            onrendered: function(canvas) {
                theCanvas = canvas;

                document.body.appendChild(canvas);
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
});

Ответы

Ответ 1

Я искал в Интернете и не мог найти решение этого, поэтому я пошел и экспериментировал. Успешно работал во всех браузерах:

HTML, который я использую для тестирования:

<div class="copyable">
    <img src="images/sherlock.jpg" alt="Copy Image to Clipboard via Javascript."/>
</div>
<div class="copyable">
    <img src="images/stark.jpg" alt="Copy Image to Clipboard via Javascript."/>
</div>

Код JavaScript/jQuery выглядит следующим образом:

<script>
        //Cross-browser function to select content
        function SelectText(element) {
            var doc = document;
            if (doc.body.createTextRange) {
                var range = document.body.createTextRange();
                range.moveToElementText(element);
                range.select();
            } else if (window.getSelection) {
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(element);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
        $(".copyable").click(function (e) {
            //Make the container Div contenteditable
            $(this).attr("contenteditable", true);
            //Select the image
            SelectText($(this).get(0));
            //Execute copy Command
            //Note: This will ONLY work directly inside a click listenner
            document.execCommand('copy');
            //Unselect the content
            window.getSelection().removeAllRanges();
            //Make the container Div uneditable again
            $(this).removeAttr("contenteditable");
            //Success!!
            alert("image copied!");
        });
</script>

Выгрузили также GITHub: https://github.com/owaisafaq/copier-js

Ответ 3

Ознакомьтесь с этим руководством по копированию и вставке с помощью JavaScript: https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

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

Ответ 4

Ну, это мой первый пост здесь с ответом, я думаю, :)

На самом деле я в настоящее время использую компонент веб-браузера cefsharp одного из моих проектов, cefsharp работает в браузере на основе Chrome, и я хочу скопировать первый элемент img веб-страницы

С cefsharp вы можете манипулировать браузером только javascript, поэтому я думаю, что мы можем справиться с этим с помощью элемента canvas.

/*
  'cause of lorempixel timeout, i used img onload function.
*/

function copyImage() {
  var imgCap = document.getElementById('imgCap');
  var imgCanvas = document.createElement('canvas');

  imgCanvas.id = 'imgCanvas';
  imgCanvas.height = 40;
  imgCanvas.width = 120;

  document.body.appendChild(imgCanvas);
  var originalContext = imgCanvas.getContext('2d');
  originalContext.drawImage(imgCap, 0, 0);

  //return imgCanvas.toDataURL();
}

//document.onload = copyImage();
<img id="imgCap" src="http://lorempixel.com/120/40" onload="copyImage();"/>

Ответ 5

Сегодня, 4 года спустя, это самая звездная проблема в Google Chrome. Для копирования изображений используется JavaScript. И теперь это возможно!

Chrome 76 Beta поддерживает это: https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html

Вы можете прочитать полный проект здесь: https://www.chromestatus.com/feature/5074658793619456

и здесь: https://w3c.github.io/clipboard-apis/#async-clipboard-api

Пример:

var data = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="], {type : "image/png"});

  const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
  await navigator.clipboard.write([clipboardItemInput]);

Вы можете проверить это здесь: http://w3c-test.org/clipboard-apis/async-write-image-read-image-manual.https.html

(Теперь поддерживается только Chrome 76 beta)