Question

My user need to screen shot their error message throw my website. They should directly paste from clipboard in my website instead convert the jpeg. Preferable browser is Firefox. I try to use ZeroClipBoard but it works for words not images. Appreciated if anyone could advice and share any links for references.

Was it helpful?

Solution

Simple answer: you can't. There is no web-standards way to read binary data from the clipboard, I also do not believe that Flash or Silverlight does this either (Flash can expose bitmap data from the clipboard, but only under AIR, i.e. not in a browser context).

You could write a small desktop utility program that your users download and run, which will take a screenshot and upload it for them, but without that your users will have to paste the image into Paint, save to disk, and upload with an <input type="file">.

OTHER TIPS

I'm not sure of the compatibility with mozilla but you should look at the onpaste event

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

and event.clipboarddata

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

Cross compatibility is probably is probably going to be an issue.

You can look at the source for wordpress plugin Image Elevator http://wordpress.org/plugins/image-elevator/

Look at admin/assests/js/image-elevator-global.js for ideas.

After looking at the plugin I got the following code to work. It reloads the page image with whatever you paste. Works on chrome but not 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>

for the server side - test-pastup.php

<?php
   $source = $_FILES['file']['tmp_name'];
   move_uploaded_file( $source, 'aaa.png' );
?>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top