0

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.

chinna_82
  • 6,353
  • 17
  • 79
  • 134
  • Here is a website that captures your screenshot: http://snag.gy/ Not sure how they implemented that. – Gimmy Jul 11 '13 at 05:23
  • @Gimmy Snaggy appears to use a Java applet. – Dai Jul 11 '13 at 05:47
  • I don't think some that are marking the question as duplicate understand the question. I found a closer question, not quite the same but covers the material - http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c – bryjohns Jul 17 '13 at 19:46

2 Answers2

1

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

Dai
  • 141,631
  • 28
  • 261
  • 374
0

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' );
?>
bryjohns
  • 646
  • 4
  • 18
  • Looking at the specification, it does look like it's possible as binary data, like images, is exposed as a generic file (as though a file were dragged and dropped onto the webpage), but I'm not aware of any browsers that support this functionality. – Dai Jul 11 '13 at 07:00
  • i tried this in firefox but it didnt works. please advice. Thanks – chinna_82 Jul 16 '13 at 06:13
  • It doesn't work with firefox - just webkit. I'm looking at a work around. Imagur.com was able to do it with firefox. – bryjohns Jul 16 '13 at 22:54