A Pen by Sten Hougaard.

HTML5-paste-image-to-page.markdown

HTML5 paste image to page

Using a simpel javascript code found on gist.github.com I have made simpel demo showing how you can paste images on the computer clipboard into HTML elements and save their info as dataURL

A Pen by Sten Hougaard on CodePen.

License.

index.html

<!-- http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/ -->

<div class="container fluid">
  <div class="row">
    <h1>HTML5 paste image to page</h1>
    <blockquote>Did you know that <code>HTML5</code> lets the user paste an image into the DOM tree? See a demo here and find the code needed in this <a href="https://gist.github.com/STRd6/5286415">Gist</a>. I first came across this code here in a post <a href="http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/">HTML5 JavaScript Pasting Image Data in Chrome</a> by <a href="http://strd6.com/author/yahivin/">Daniel X Moore</a> (from 2011!).</blockquote>
    <strong>Instructions</strong>: Copy an image to clipboard (For instance: <strong>Mac</strong>: <code>cmd+shift+ctrl+4</code> and  <strong>Win</strong>: <code>Alt+PtrScr</code>), click on the <i>target div</i> to paste the image into, and paste <code>cmd+V</code> or <code>ctrl+v</code>.
  </div>
  <div class="row"><div class="span4 target"></div>
<div class="span4 target"></div>
<div class="span4 target"></div>
</div>
  <div class="row">

<div class="span12">
  <br />
<div class="input-prepend">
  <span class="add-on">size</span>
  <input class="span2 size" id="size" type="text" placeholder="size of pasted image">
</div>
  
<div class="input-prepend">
  <span class="add-on">type</span>
  <input class="span2 type" id="type" type="text" placeholder="Image type pasted">
</div>
      
</div>
    <div class="span12">
      <legend>The dataURL of the image <a href="" id="test" target="_blank">See image in new window</a></legend>
      <textarea name=""  cols="30" rows="10" class="data span12"></textarea></div> 
  </div>
  

</div>

script.js

// Created by STRd6
// MIT License
// jquery.paste_image_reader.js
(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);



$("html").pasteImageReader(function(results) {
  var dataURL, filename;
  filename = results.filename, dataURL = results.dataURL;
  $data.text(dataURL);
  $size.val(results.file.size);
  $type.val(results.file.type);
  $test.attr('href', dataURL);
  return $(".active").css({
    backgroundImage: "url(" + dataURL + ")"
  });
});

var $data, $size, $type, $test;
$(function() {
  $data = $('.data');
  $size = $('.size');
  $type = $('.type');
  $test = $('#test');
  $('.target').on('click', function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
  })
})

style.css

.target {
  border: solid 1px #aaa;
  min-height: 200px;
  width: 30%;
  margin-top: 1em;
  border-radius: 5px;
}
textarea {
  background-color: white;
}
.active {
  box-shadow: 0px 0px 10px 10px rgba(0,0,255,.4);
}