LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


HTML5 paste image to page

Did you know that HTML5 lets the user paste an image into the DOM tree? See a demo here and find the code needed in this Gist. I first came across this code here in a post HTML5 JavaScript Pasting Image Data in Chrome by Daniel X Moore (from 2011!).
Instructions: Copy an image to clipboard (For instance: Mac: cmd+shift+ctrl+4 and Win: Alt+PtrScr), click on the target div to paste the image into, and paste cmd+V or ctrl+v.
Version 1.1 Added camera snapshoot sound on paste - use my pen Snapshoot sound - snapshoot() to get that feature on your pens. Also added option to toggle background-size: contain when clicking on pasted image.

size
type
width
height
The dataURL of the image See image in new window
CSS
.target {
  border: solid 1px #aaa;
  min-height: 200px;
  width: 30%;
  margin-top: 1em;
  border-radius: 5px;
  cursor: pointer;
  transition: 300ms all;
  position: relative;
}

.contain {
    background-size: cover;
  position: relative;
  z-index: 10;
  top: 0px;
  left: 0px;
}
textarea {
  background-color: white;
}
.active {
  box-shadow: 0px 0px 10px 10px rgba(0,0,255,.4);
}
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);
            snapshoot();
            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);
  var img = document.createElement('img');
  img.src= dataURL;
  var w = img.width;
  var h = img.height;
  $width.val(w)
  $height.val(h);
  return $(".active").css({
    backgroundImage: "url(" + dataURL + ")"
  }).data({'width':w, 'height':h});
});

var $data, $size, $type, $test, $width, $height;
$(function() {
  $data = $('.data');
  $size = $('.size');
  $type = $('.type');
  $test = $('#test');
  $width = $('#width');
  $height = $('#height');
  $('.target').on('click', function() {
    var $this = $(this);
    var bi = $this.css('background-image');
    if (bi!='none') {
        $data.text(bi.substr(4,bi.length-6));
    }
                    
                    
    $('.active').removeClass('active');
    $this.addClass('active');
    
    $this.toggleClass('contain');
    
    $width.val($this.data('width'));
    $height.val($this.data('height'));
    if ($this.hasClass('contain')) {
      $this.css({'width':$this.data('width'), 'height':$this.data('height'), 'z-index':'10'})
    } else {
      $this.css({'width':'', 'height':'', 'z-index':''})
    }
    
  })
})
Host Instantly Drag and Drop Website Builder

 

Description

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
Term
Mon, 11/27/2017 - 21:33

Related Codes

Pen ID
Pen ID
Pen ID