javascriptコマンドでのみ画像を選択してクリップボードにコピーする方法はありますか？

Question

テキストや関連するsrcではなく、イメージ自体をコピーしたいと思います。

私はあなたが遊んで、そのコピーテキストは罰金が、それはない画像のために働く見ることができるhttps://jsfiddle.net/pvuefca7/1/

jsfiddle例を作りました。私はそれがノードか何かそれらの行に沿っていない<img>と関係があると思う。特定の画像を選択して対処する方法があるかどうかを尋ねています。 document.execCommand('Copy');コマンドは、イメージが唯一の要素であればイメージをコピーし、IEは新しいタブでイメージを開き、コンソールでコマンドを実行します。しかし、私はそれが唯一の要素ではない時には、イメージに対処する方法が必要です。

Answer 1

ボタンをクリックするとBlobとイメージをリクエストできます。 が<textarea>の要素からdata URIの画像をFileReaderloadに設定した後、.readAsDataURL()を呼び出します。 .valueのtextareaを選択してください。プロンプトが表示されたらCTRL+Cを押す。 copyでイベントハンドラは、このdoesntのは、画像が、Altキーをコピーしevent.clipboardData

<div> 
 
    <img id="image" width="100" src="https://placehold.it/100x100?text=✔"> 
 
    <button onclick="copyElement('image');">Copy image</button> 
 
</div> 
 
<script> 
 
function copyElement(id) { 
 
    var element = document.getElementById(id); 
 
    var text = document.createElement("textarea"); 
 

 
    document.oncopy = function(e) { 
 
    e.clipboardData.setData("text/plain", text.value); 
 
    console.log(e.clipboardData.getData("text/plain")); 
 
    } 
 

 
    fetch(element.src.replace(/^(http:|https:)/, location.protocol)) 
 
    .then(function(response) { 
 
     return response.blob() 
 
    }) 
 
    .then(function(blob) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function() { 
 
     document.body.appendChild(text); 
 
     text.value = reader.result; 
 
     text.select(); 
 
     alert("Press CTRL+C to copy image to clipboard"); 
 
     } 
 
     reader.readAsDataURL(blob) 
 
    }) 
 
} 
 

 
</script>