HTML

<canvas style="border:1px solid grey;" id="cc" width="1000" height="800">

使用Javascript：

var pasteCatcher;
if (!window.Clipboard){
 if(navigator.userAgent.indexOf("Firefox")>0){
    pasteCatcher = document.createElement("div");
    pasteCatcher.setAttribute("id", "paste_ff");
    pasteCatcher.setAttribute("contenteditable", "");
    pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;';
    pasteCatcher.style.marginLeft = "-20px";
    document.body.appendChild(pasteCatcher);
    pasteCatcher.focus();

    document.getElementById('paste_ff').addEventListener('DOMSubtreeModified',function(){
        if(pasteCatcher.children.length == 1){
                        var canvas = document.getElementById("cc");
                         var ctx = canvas.getContext("2d");
            img = pasteCatcher.firstElementChild.src;
            var img2 = new Image();
            img2.onload = function(){
                ctx.drawImage(img2, 0, 0);
                }
            img2.src = img;
            pasteCatcher.innerHTML = '';
            }
        },false);
    }
 }

以上代码工作正常。当剪贴板有图像时，那将被设置为画布。 如果剪贴板有文字，那我怎样才能获得文字并在画布上画画？

谢谢！

Answer 1

正如您所发现的，出于安全原因，对浏览器的访问因浏览器而异。

甚至用于读/写剪贴板的方法也各不相同。

解决方法：

让用户将文本粘贴到html textarea中，然后阅读textarea值。

解决方法的好处是：

无论如何，用户必须粘贴到某处，所以让它成为textarea。
用户可以根据需要编辑textarea。
textarea值不受安全原因的限制，因此可以跨浏览器工作。

使用javascript获取剪贴板数据？

HTML

使用Javascript：

1 个答案: