JavaScriptで画像をクリップボードにコピーする方法について解説します。実際にサンプルコードを用いながら学びましょう。
JavaScriptでテキストをクリップボードにコピーする
JavaScriptでテキストをクリップボードにコピーするコードです。文字をクリックすると、リンクがシステムのクリップボードにコピーされます。
<div onclick="setDataUrl()" id="target-link">サンプルテキスト</div>
<script>
function setDataUrl(){
const link = location.href;
navigator.clipboard.writeText(link);
alert("リンクをコピーしました");
}
</script>alertは無くても良いですが、分かりやすくするために追加しています。
location.href
location.hrefは、現在のページのURLを含む文字列を返すJavaScriptのプロパティです。このプロパティを使用することで、現在のページのURLを取得することができます。
navigator.clipboard.writeText()
navigator.clipboard.writeText()は、ブラウザのAPIの1つであり、指定したテキストをクリップボードにコピーするために使用されます。このメソッドを呼び出すには、以下のようにします。
navigator.clipboard.writeText('コピーするテキスト');
document.execCommand(‘copy’)が非推奨になっているため、代わりの方法として、上記のAPIが登場しているようです。
クリップボードとのやりとり - Mozilla | MDN
拡張機能でクリップボードを扱うのは、Web API の document.execCommand メソッド（非推奨）から navigator.clipboard メソッドに移行しています。
developer.mozilla.org
まとめ
ただし、このメソッドは比較的新しいAPIであるため、すべてのブラウザでサポートされているわけではありません。サポートされているブラウザについては、MDN Web Docsなどのリソースを確認してください。
