web-dev-qa-db-ja.com

画像をクリップボードにコピー

一見、プログラムでJavaScript Webアプリからクリップボードに画像を（まだ）コピーできないのですか？

クリップボードのテキストをコピーしようとしましたが、うまくいきました。

今、私は画像をコピーしたいと思います ctrl+v WordまたはExcelまたはペイントに貼り付けます。

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#container1"), {
            onrendered: function(canvas) {
                theCanvas = canvas;

                document.body.appendChild(canvas);
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
});
javascriptjqueryclipboard
19
rachedbchir

私はインターネットを検索しましたが、これに対する解決策が見つからなかったため、先に進んで実験しました。すべてのブラウザーで正常に動作しました：

テストに使用しているHTMLは次のとおりです。

<div class="copyable">
    <img src="images/sherlock.jpg" alt="Copy Image to Clipboard via Javascript."/>
</div>
<div class="copyable">
    <img src="images/stark.jpg" alt="Copy Image to Clipboard via Javascript."/>
</div>

JavaScript/jQueryコードは次のようになります。

<script>
        //Cross-browser function to select content
        function SelectText(element) {
            var doc = document;
            if (doc.body.createTextRange) {
                var range = document.body.createTextRange();
                range.moveToElementText(element);
                range.select();
            } else if (window.getSelection) {
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(element);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
        $(".copyable").click(function (e) {
            //Make the container Div contenteditable
            $(this).attr("contenteditable", true);
            //Select the image
            SelectText($(this).get(0));
            //Execute copy Command
            //Note: This will ONLY work directly inside a click listenner
            document.execCommand('copy');
            //Unselect the content
            window.getSelection().removeAllRanges();
            //Make the container Div uneditable again
            $(this).removeAttr("contenteditable");
            //Success!!
            alert("image copied!");
        });
</script>

GITHubにもアップロードしています： https://github.com/owaisafaq/copier-js

17
owaisafaq

あなたが正しいです。 chromeまだクリップボードに画像データをコピーすることはサポートされていません。 https://bugs.chromium.org/p/chromium/issues/detail?id=150835 =。約4年間開いているようです。

https://w3c.github.io/clipboard-apis/

6
notsiddhartha

JavaScriptを使用したコピーと貼り付けに関するこのガイドをご覧ください。 https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

これによれば、Chrome、Safari、Firefoxはすべて、プレーンテキストと一緒に画像のコピーをサポートしますが、IEはテキストのコピーのみを許可します。上記のリンク先ページは、コンテキストメニューに表示されますが、複数のブラウザがプログラムによる画像のコピーをサポートしているようです。

0
OverlappingElvis

さて、これは私が推測する答えを持つここでの最初の投稿です:)

実際、私は現在、私のプロジェクトの1つであるcefsharp Webブラウザーコンポーネントを使用しています。cefsharpは、chromeベースのブラウザーで実行されています。

Cefsharpを使用すると、ブラウザのみのJavaScriptを操作できるため、canvas要素を使用して処理できると思います。

_/*
  'cause of lorempixel timeout, i used img onload function.
*/

function copyImage() {
  var imgCap = document.getElementById('imgCap');
  var imgCanvas = document.createElement('canvas');

  imgCanvas.id = 'imgCanvas';
  imgCanvas.height = 40;
  imgCanvas.width = 120;

  document.body.appendChild(imgCanvas);
  var originalContext = imgCanvas.getContext('2d');
  originalContext.drawImage(imgCap, 0, 0);

  //return imgCanvas.toDataURL();
}

//document.onload = copyImage();_
<img id="imgCap" src="http://lorempixel.com/120/40" onload="copyImage();"/>

return imgCanvas.toDataURL();を使用すると、base64でエンコードされた値を取得し、どこでも使用できます。

これは私のcefsharpコードで、動作しています。

_        string copyImageOtClipboardScript = "(function(){ try{var imgCap = document.getElementById('imgCap'); var imgCanvas = document.createElement('canvas'); imgCanvas.id = 'imgCanvas'; imgCanvas.height = 40; imgCanvas.width = 120; document.body.appendChild(imgCanvas); var originalContext = imgCanvas.getContext('2d'); originalContext.drawImage(imgCap, 0, 0); return imgCanvas.toDataURL();  }catch(e){ alert(e); } })();";

        var task = chromeBrowser.EvaluateScriptAsync(copyImageOtClipboardScript).ContinueWith(x =>
        {
            var resp = x.Result;

            if (resp.Success)
            {
                this.Invoke((MethodInvoker)delegate
                {
                    Bitmap bmp = null;
                    string captchaResult = "", captchaBase64;

                    var bytes = Convert.FromBase64String(resp.Result.ToString().Replace("data:image/png;base64,", ""));
                    using (var imageFile = new FileStream("temp_captcha.png", FileMode.Create))
                    {
                        imageFile.Write(bytes, 0, bytes.Length);
                        imageFile.Flush();
                    }

                });
            }
        });
_
0
SysEng