javascript - texto - Copiar imagen al portapapeles

javascript copiar

Question

Aparentemente, ¿no puede (todavía) copiar programáticamente una imagen al portapapeles desde una aplicación web de JavaScript?

Intenté copiar un texto en el portapapeles y funcionó.

Ahora me gustaría copiar una imagen y después de presionar ctrl + v para pegar en Word o Excel o Paint.

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

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

Answer 1

Bueno, esta es mi primera publicación aquí con una respuesta, supongo :)

Actualmente estoy usando el componente de navegador web cefsharp uno de mi proyecto, cefsharp se ejecuta en un navegador basado en Chrome y quiero copiar el elemento img uno de la página web

Con cefsharp puede manipular javascript solo del navegador, por lo que creo que podemos manejarlo usando el elemento lienzo.

/*
  ''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();"/>

con return imgCanvas.toDataURL(); puede obtener un valor codificado en base64 y usarlo donde desee.

este es mi código cefsharp, está funcionando.

        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();
                    }

                });
            }
        });

Answer 2

Busqué en Internet y no pude encontrar una solución a esto, así que seguí adelante y experimenté. Trabajó con éxito en todos los navegadores:

El HTML que estoy usando para probar es:

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

El código JavaScript / jQuery se ve así:

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

También he subido a GITHub: https://github.com/owaisafaq/copier-js

Answer 3

Consulte esta guía para copiar y pegar con JavaScript: https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

De acuerdo con esto, Chrome, Safari y Firefox admiten copiar imágenes junto con texto plano, mientras que IE solo permite copiar texto. La página vinculada anteriormente describe cómo este servicio utiliza una extensión para agregar esta funcionalidad a un menú contextual, pero parece que varios navegadores admiten la copia programática de imágenes.

Answer 4

No puede copiar al portapapeles con Javascript por razones de seguridad, aquí puede encontrar una solución alternativa en una discusión. Implica flash. Haga clic en el botón copiar al portapapeles usando jQuery

Answer 5

Tienes razón. Todavía no hay soporte para copiar datos de imágenes en el portapapeles en Chrome. https://bugs.chromium.org/p/chromium/issues/detail?id=150835 . Parece que ha estado abierto durante unos 4 años.

Hay una especificación API de portapapeles que está por aparecer https://w3c.github.io/clipboard-apis/