web-dev-qa-db-fra.com

Copier l'image dans le presse-papiers

Apparemment, vous ne pouvez pas (encore) copier par programme une image dans le presse-papiers à partir d'une application Web JavaScript?

J'ai essayé de copier un texte dans le presse-papiers, et cela a fonctionné.

Maintenant, je voudrais copier une image et après avoir appuyé sur ctrl+v à coller dans Word, Excel ou Paint.

$(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

J'ai cherché sur Internet et je n'ai pas trouvé de solution à cela, alors j'ai continué et j'ai expérimenté. Fonctionné avec succès sur tous les navigateurs:

Le code HTML que j'utilise pour les tests est:

<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>

Le code JavaScript/jQuery ressemble à ceci:

<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>

Ont également téléchargé sur GITHub: https://github.com/owaisafaq/copier-js

17
owaisafaq

Vous avez raison. Il n'y a pas de support pour copier les données d'image dans le presse-papiers dans chrome encore. https://bugs.chromium.org/p/chromium/issues/detail?id=150835 On dirait qu'il est ouvert depuis environ 4 ans maintenant.

Il y a une spécification d'API de presse-papiers qui arrive cependant https://w3c.github.io/clipboard-apis/

6
notsiddhartha

Consultez ce guide pour copier et coller avec JavaScript: https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

Selon cela, Chrome, Safari et Firefox prennent tous en charge la copie d'images avec du texte brut, tandis que IE autorise uniquement la copie de texte. La page liée ci-dessus décrit comment ce service utilise une extension pour ajouter cette fonctionnalité dans un menu contextuel, mais il semble que plusieurs navigateurs prennent en charge la copie programmée d'images.

0
OverlappingElvis

Eh bien, c'est mon premier post ici avec une réponse je suppose :)

En fait, j'utilise actuellement le composant de navigateur Web cefsharp, l'un de mes projets, cefsharp fonctionne sur un navigateur basé sur chrome et je veux copier l'élément img un de la page Web

Avec cefsharp, vous pouvez manipuler le navigateur uniquement javascript, donc je pense que nous pouvons le gérer en utilisant l'élément 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();"/>

avec return imgCanvas.toDataURL(); vous pouvez obtenir la valeur encodée en base64 et l'utiliser où vous voulez.

c'est mon code cefsharp, ça marche.

        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