Pen ID
Unlock Campus Themeforest adv



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.

The dataURL of the image See image in new window
.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);
// 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;
  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) {
          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
            return found = true;

$("html").pasteImageReader(function(results) {
  var dataURL, filename;
  filename = results.filename, dataURL = results.dataURL;
  $test.attr('href', dataURL);
  var img = document.createElement('img');
  img.src= dataURL;
  var w = img.width;
  var h = img.height;
  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') {
    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



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

Related Codes

Pen ID
Pen ID
Pen ID