Question

我的用户需要屏幕截图他们的错误信息扔我的网站。他们应该直接从我的网站中的剪贴板粘贴而不是转换jpeg。优选的浏览器是Firefox。我尝试使用ZeroClipBoard，但它适用于单词而非图像。感谢是否有人可以建议并分享任何参考链接。

Answer 1

简单回答：你做不到。没有web标准方法从剪贴板读取二进制数据，我也不相信Flash或Silverlight也不这样做（Flash 可以从剪贴板中公开位图数据，但仅限于AIR，即不在浏览器上下文中。）

您可以编写一个用户下载并运行的小型桌面实用程序，它将截取屏幕并为其上传，但如果没有，您的用户必须将图像粘贴到Paint，保存到磁盘，然后上传<input type="file">。

Answer 2

我不确定与mozilla的兼容性，但你应该看一下onpaste事件

https://developer.mozilla.org/en-US/docs/Web/API/element.onpaste

和event.clipboarddata

http://www.w3.org/TR/clipboard-apis/

交叉兼容可能是一个问题。

您可以查看wordpress插件Image Elevator http://wordpress.org/plugins/image-elevator/

的来源

请查看admin / assests / js / image-elevator-global.js以获取想法。

看完插件后，我得到了以下代码。它会使用您粘贴的任何内容重新加载页面图像。适用于Chrome但不适用于Firefox。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
document.onpaste = function (e) {
    var items = e.clipboardData.items;
    for (var i = 0; i < items.length; ++i) {
        // uploads image on a server
        var img = items[i].getAsFile();

        var oData = new FormData();
        oData.append('file', img);

        var req = new XMLHttpRequest();
        req.open("POST", "test-pastup.php");

        req.onreadystatechange = function() {
            setTimeout(function() { 
                var img = $('img').clone(); 
                $('img').remove(); 
                $('body').prepend(img);
            }, 100);
        }

        req.send(oData); 

        return;
    }
}
</script>
</head>
<body>
<img src="aaa.png" />
<input/>
</body>
</html>

用于服务器端 - test-pastup.php

<?php
   $source = $_FILES['file']['tmp_name'];
   move_uploaded_file( $source, 'aaa.png' );
?>

打印屏幕到网站

2 个答案: