How to use a copy form windows inside web application just like the image copy inside google gmail

Question

Inside gmail you can use the paste option to paste an image directly form windows clipboard. My obvious question is: How to do this.

I found techniques to copy text with use of flash code but this is poorly what I am looking for. The idea is that I copy an image or text inside windows and then paste it inside an simple text editor from ticked system.

It has to work fully automatic so it sees if the data is text and shut be inside tags and if it is an image it has to be inside the <img> tag. Like this <img src="rawimagedata" title="filename.jpg" />

Someone a tip or better a script example. No matter if you use flash or java if it works it works for me.

Thank you in advance.

Gmail is BASE-64 encoding the image on the fly and using a DATA-URL for the image. — Diodeus - James MacFarlane, Feb 21 '13 at 15:41
I believe it's part of Chrome, not something in JavaScript itself. — Diodeus - James MacFarlane, Feb 21 '13 at 15:52
*"My obvious question is: How to do this."* A good way to make a question obvious is to add a question mark. — Andrew Thompson, Feb 22 '13 at 02:40

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

You have to encode it in Java

 byte[] byteArray = new byte[102400];
 base64String = Base64.encode(byteArray);

byteArray is the picture and with the Base64.encode function you get the string you have to enter below

more infos see: https://stackoverflow.com/a/10226133/1667829

and then you can show it like that:

<div>
    <p>Taken from wikpedia</p>
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

http://jsfiddle.net/hpP45/

edited May 23 '17 at 10:24

Community

1
1

answered Feb 21 '13 at 15:55

Vloxxity

980
1
9
30

Oke looks handy I am trying to actually get the raw data when I copy an image inside windows and I found this: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/ – botenvouwer Feb 21 '13 at 16:01
i would rather try this: http://stackoverflow.com/a/6804718/1667829 this is multibrowser compatible – Vloxxity Feb 21 '13 at 16:41

score 0 · Accepted Answer · answered Feb 22 '13 at 09:34

I found a way to get the image it is only working for Google chrome. I am busy working on a version that works on Firefox as well.

With inspiration form: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script>
// Created by STRd6
// MIT License
// jquery.paste_image_reader.js
(function() {
  (function($) {
    var defaults;
    $.event.fix = (function(originalFix) {
      return function(event) {
        event = originalFix.apply(this, arguments);
        if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
          event.clipboardData = event.originalEvent.clipboardData;
        }
        return event;
      };
    })($.event.fix);
    defaults = {
      callback: $.noop,
      matchType: /image.*/
    };
    return $.fn.pasteImageReader = function(options) {
      if (typeof options === "function") {
        options = {
          callback: options
        };
      }
      options = $.extend({}, defaults, options);
      return this.each(function() {
        var $this, element;
        element = this;
        $this = $(this);
        return $this.bind('paste', function(event) {
          var clipboardData, found;
          found = false;
          clipboardData = event.clipboardData;
          return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
            var file, reader;
            if (found) {
              return;
            }
            if (type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType)) {
              file = clipboardData.items[i].getAsFile();
              reader = new FileReader();
              reader.onload = function(evt) {
                return options.callback.call(element, {
                  dataURL: evt.target.result,
                  event: evt,
                  file: file,
                  name: file.name
                });
              };
              reader.readAsDataURL(file);
              return found = true;
            }
          });
        });
      });
    };
  })(jQuery);
}).call(this);

jQuery("html").pasteImageReader(function(results) {
  var dataURL, filename;
  filename = results.filename, dataURL = results.dataURL;

  jQuery('#deze').html('<img src="' + dataURL + '" />');
});
</script>
        <style>
            #deze{
                height:400px;
                width:400px;
                border:2px solid red;
            }
        </style>
    </head>
    <body>
        <div id="deze">testdiv</div>

    </body>
</html>

note:

In this example the creator override the $ sing and you can not use jquery anymore like this: $('#deze')

How to use a copy form windows inside web application just like the image copy inside google gmail

2 Answers2