如何将图像放入剪贴板中？

如何使用Javascript（在copy事件的处理程序中）将图像放入剪贴板，就好像它会通过右键单击浏览器中的图像并从上下文菜单中选择“复制图像”来完成。如何将图像放入剪贴板中？

此script显示剪贴板内容的详细信息。对于复制的图像其打印：

DataTransfer { dropEffect: "none", effectAllowed: "uninitialized", items: DataTransferItemList[2], types: Array[2], files: FileList[1], mozItemCount: 1, mozCursor: "auto", mozUserCancelled: false, mozSourceNode: null } 
DataTransferItem { kind: "string", type: "text/html" } 
DataTransferItem { kind: "file", type: "image/png" } 
Array [ "text/html", "Files" ] 
File { name: "image.png", lastModified: 1504122845696, lastModifiedDate: Date 2017-08-30T19:54:05.696Z, webkitRelativePath: "", size: 385273, type: "image/png" }

所以，问题可以很可能改写 - 如何将文件附加到clipboardData在copy事件处理函数？

document.addEventListener('copy', (event) => { 
    // event.clipboardData.? 
    // maybe event.clipboardData.setData(?) 
})

使用setData()方法不工作demo。

来源

2017-08-30 czerny

你搜索？ https://stackoverflow.com/questions/33175909/copy-image-to-clipboard – epascarello

当你点击'复制图像'在右键单击图像上下文菜单中，它已经在剪贴板中。 –

@ koushik-chatterjee是的。我想以编程方式模拟这种行为。 – czerny

//get reference to the div 
 
var div = document.getElementById('someDiv'); 
 

 
//attach a paste event 
 
div.addEventListener('paste', function(ev){ 
 
    var imgFile = null; 
 
    var idx; 
 
    var items = ev.clipboardData.items; 
 
    for(idx=0;idx<items.length;idx++) { 
 
     //check if any content is file 
 
     if(items[idx].kind==="file") { 
 
      //take that file to imgFile 
 
      imgFile = items[idx].getAsFile(); 
 
      break; 
 
     } 
 
    } 
 
    if(imgFile==null) {return;} 
 
    
 
    //create a File reader 
 
    var reader = new FileReader(); 
 
    reader.onload = function() { 
 
     //create an img DOM object 
 
     var img = new Image(); 
 
     //reader.result is nothing but the Base64 representation 
 
     img.src = reader.result; 
 
     
 
     //operate the DOM, clear the div and append the img 
 
     div.innerHTML = ''; 
 
     div.appendChild(img); 
 
    } 
 
    //read that file using the reader 
 
    reader.readAsDataURL(imgFile); 
 
});

<div id="someDiv" style="min-width: 200px;min-height: 200px; border: 1px solid red"> 
 
Paste an image here (using Ctrl + V) 
 

 
</div>

来源

2017-08-30 21:48:37

问题是关于将图像写入剪贴板并处理'copy'事件。这个回应似乎是关于'paste'事件和从剪贴板读取图像。 – czerny

你不需要处理，你需要处理的是粘贴事件，把它放在某个地方 –

哦，看起来你想调用'copy image'的动作 –

如何将图像放入剪贴板中？

回答

相关问题