Q&A
ご提示のサイトでできてますが（ボタン押下→コピー→Ctrl+vでExcelに貼り付け）、ご自身ではどのようなコードで試されたのでしょうか。
jsで、imgタグの内容もしくは、img.srcに設定するbase64イメージをクリップボードにコピーして、Excelなどに貼り付けられないか調査しています。
テキストのコピーについてはできることは確認できたのですが、画像についてはうまくいきません。
サンプルとして見つけた(参考)ページがあり、実行してみたところ、エラーにはならないのですが、クリップボードに画像はコピーされませんでした。
他のサイトで見るやり方もこのサンプルのイメージではあります。
なにか権限が足らないのか、そもそもできるはずがないのかというところを確認したいです。
実際にはChrome拡張で実装できればと思っていますので、Chrome拡張の機能ならできるということでも構いません。
気になるのが、Chrome拡張にあるスクリーンキャプチャのアプリはどれを見てもクリップボードに直接コピーしてくれる機能がありません。クリップボードにコピーしたければ、右クリックして。。という説明があります。
jsでの実現は難しいのでしょうか？
ご意見いただいたことからわかったのですが、
サンプルページのような実装で、imgをクリップボードにコピーすることはできるようです。
ただし、base64のimgについてはコピーされません。
これは、ロジックの問題というより、仕様的なものかもしれません。
base64デコードページというものが提供されています。(リンク先)
こちらのページで適当な画像のbase64文字列を貼り付けて下にその画像を表示し、画像を右クリックして「画像をコピー」でコピーしたものをExcelに貼り付けても、同じように白い画像が貼り付くだけです。
ここで普通にコピペできるような状態でないと、プログラムでもコピーできないのではないかと思います。
base64画像を何らかの変換でimg.srcに通常の画像として設定するような方法はあるのでしょうか？
すいません。私も最初の1回目は動いた気がするのですが、2回目以降はコピーされません。
ボタン押下してコピー後、適当なテキストをコピペした後で、再度ボタンを押しても画像はクリップボードに入るでしょうか？
今やってみたら、ページをリロードしたらもう一度画像がコピーされました。
画像複数個用意して試してみたほうが良いかもしれませんね。
サンプルページの実装について、
26行目辺りの var sel = window.getSelection(); の下に、
sel.removeAllRanges();
というクリア処理を入れることで、何度でもコピーできるようになりました。
サンプルページは、固定の画像ファイルを使用していますが、実際はキャプチャしたbase64 imgになります。
これを設定するとコピーされません。Excelに貼ると白い小さい枠が貼り付けられます。
サンプルページでもimg src=にbase64文字列を指定してみましたが、コピーされませんでした。
index.htmlのimgタグを
<img id="surf_image" src="data:image/png;base64,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" alt="Picture for copy" style="border: 1px solid rgb(153, 153, 153); cursor: pointer; width: 400px; z-index: 200;">
に変更しました。
あなたの回答
tips
プレビュー
