質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

JavaScriptで画像をクリップボードにコピーしたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 3,242

score 112

jsで、imgタグの内容もしくは、img.srcに設定するbase64イメージをクリップボードにコピーして、Excelなどに貼り付けられないか調査しています。

テキストのコピーについてはできることは確認できたのですが、画像についてはうまくいきません。
サンプルとして見つけた(参考)ページがあり、実行してみたところ、エラーにはならないのですが、クリップボードに画像はコピーされませんでした。

他のサイトで見るやり方もこのサンプルのイメージではあります。
なにか権限が足らないのか、そもそもできるはずがないのかというところを確認したいです。

実際にはChrome拡張で実装できればと思っていますので、Chrome拡張の機能ならできるということでも構いません。

気になるのが、Chrome拡張にあるスクリーンキャプチャのアプリはどれを見てもクリップボードに直接コピーしてくれる機能がありません。クリップボードにコピーしたければ、右クリックして。。という説明があります。

jsでの実現は難しいのでしょうか?


ご意見いただいたことからわかったのですが、
サンプルページのような実装で、imgをクリップボードにコピーすることはできるようです。
ただし、base64のimgについてはコピーされません。

これは、ロジックの問題というより、仕様的なものかもしれません。

base64デコードページというものが提供されています。(リンク先)
こちらのページで適当な画像のbase64文字列を貼り付けて下にその画像を表示し、画像を右クリックして「画像をコピー」でコピーしたものをExcelに貼り付けても、同じように白い画像が貼り付くだけです。
ここで普通にコピペできるような状態でないと、プログラムでもコピーできないのではないかと思います。

base64画像を何らかの変換でimg.srcに通常の画像として設定するような方法はあるのでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • propg

    2019/05/30 13:15

    今やってみたら、ページをリロードしたらもう一度画像がコピーされました。

    キャンセル

  • m.ts10806

    2019/05/30 13:53

    画像複数個用意して試してみたほうが良いかもしれませんね。

    キャンセル

  • propg

    2019/05/30 14:46

    サンプルページの実装について、
    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;">
    に変更しました。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る