Question

看起来，您还不能（还）以编程方式将图像从JavaScript Web应用程序复制到剪贴板？

我试图在剪贴板中复制文本，但它确实有效。

现在我想复制一张图片，然后按 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);
            }
        });
    });
});

Answer 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

Answer 2

你是对的。目前还不支持将图像数据复制到chrome中的剪贴板中。 https://bugs.chromium.org/p/chromium/issues/detail?id=150835。看起来它已经开放了大约4年了。

虽然有一个剪贴板API规范即将推出 https://w3c.github.io/clipboard-apis/

Answer 3

对于那些仍在寻找的人，ClipboardAPI现在可以处理png图像。

try {
    navigator.clipboard.write([
        new ClipboardItem({
            'image/png': pngImageBlob
        })
    ]);
} catch (error) {
    console.error(error);
}

Answer 4

查看本指南，使用JavaScript复制和粘贴：https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

根据这一点，Chrome，Safari和Firefox都支持复制图像和纯文本，而IE只允许复制文本。上面链接的页面描述了此服务如何使用扩展将此功能添加到上下文菜单，但似乎有几个浏览器支持以编程方式复制图像。

Answer 5

好吧，这是我在这里的第一篇回答，我想是一个答案：）

实际上，我目前正在使用cefsharp Web浏览器组件作为我的项目之一，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();"/>

通过return imgCanvas.toDataURL();，您可以获得base64编码的值，并可以在任何需要的地方使用。

这是我的cefsharp代码，正在运行。

        string copyImageOtClipboardScript = "(function(){ try{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();  }catch(e){ alert(e); } })();";

        var task = chromeBrowser.EvaluateScriptAsync(copyImageOtClipboardScript).ContinueWith(x =>
        {
            var resp = x.Result;

            if (resp.Success)
            {
                this.Invoke((MethodInvoker)delegate
                {
                    Bitmap bmp = null;
                    string captchaResult = "", captchaBase64;

                    var bytes = Convert.FromBase64String(resp.Result.ToString().Replace("data:image/png;base64,", ""));
                    using (var imageFile = new FileStream("temp_captcha.png", FileMode.Create))
                    {
                        imageFile.Write(bytes, 0, bytes.Length);
                        imageFile.Flush();
                    }

                });
            }
        });

Answer 6

因此，我用1个衬纸解决方案创建了一个完美的解决方案，将html2canvas的内容转换为画布，然后生成其图像，然后将其另存为png。例如，

HTML：
<div id="copyToImage">Hello World!</div>

JavaScript：

$("#copyToImage").click(function() {
    html2canvas(document.querySelector("#copyToImage")).then(canvas => canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({'image/png': blob})])));
});

Answer 7

出于安全原因，您无法使用Javascript复制到剪贴板，可以在此处讨论中找到解决方法。涉及flash。Click button copy to clipboard using jQuery

将图像复制到剪贴板

7 个答案: