├── .gitignore ├── ImageClipboard.js ├── ImageClipboard.min.js ├── README.md ├── bower.json ├── gulpfile.js ├── package.json └── test └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | bower_components/ 3 | -------------------------------------------------------------------------------- /ImageClipboard.js: -------------------------------------------------------------------------------- 1 | /*jshint boss:true, laxcomma: true, expr: true*/ 2 | !function (name, definition) { 3 | if (typeof module != 'undefined') module.exports = definition; 4 | else if (typeof define == 'function' && define.amd) define(name, definition); 5 | else this[name] = definition; 6 | }('ImageClipboard', function (selector, callback) { 7 | 'use strict'; 8 | 9 | var self = typeof this === 'object' ? this : {}; 10 | self.el = null; 11 | self.pasteCatcher = null; 12 | self.clipImage = null; 13 | self.onpaste = null; 14 | self.browserSupport = true; 15 | 16 | self.init = function (selector, callback) { 17 | 18 | if (typeof selector === "string") { 19 | self.el = document.querySelector(selector); 20 | } 21 | else if (_isElement(selector)) self.el = selector; 22 | else return false; 23 | 24 | self.pasteCatcher = null; 25 | self.clipImage = null; 26 | 27 | self.onpaste = typeof callback === 'function' ? callback : function () { }; 28 | 29 | //pasting not supported, make workaround 30 | if (!window.Clipboard) { 31 | self.pasteCatcher = _makePasteCatcher(); 32 | } 33 | 34 | window.addEventListener('paste', self.pasteHandler); 35 | 36 | return self; 37 | }; 38 | 39 | self.pasteHandler = function (e) { 40 | var items; 41 | 42 | if (e.clipboardData && e.clipboardData.items) { 43 | items = e.clipboardData.items; 44 | 45 | if (items) { 46 | items = Array.prototype.filter.call(items, function (element) { 47 | return element.type.indexOf("image") >= 0; 48 | }); 49 | 50 | Array.prototype.forEach.call(items, function (item) { 51 | var blob = item.getAsFile(); 52 | 53 | var rdr = new FileReader(); 54 | rdr.onloadend = function () { 55 | _loadImage(rdr.result); 56 | }; 57 | 58 | rdr.readAsDataURL(blob); 59 | }); 60 | } 61 | } 62 | else if (self.pasteCatcher) { 63 | //no direct access to clipboardData (firefox) 64 | //use the pastecatcher 65 | setTimeout(function () { 66 | 67 | var child = self.pasteCatcher.firstElementChild; 68 | 69 | if (child && child.tagName == "IMG") { 70 | _loadImage(child.src); 71 | } 72 | 73 | }, 5); 74 | } 75 | }; 76 | 77 | function _makePasteCatcher() { 78 | var pasteBox = document.createElement("div"); 79 | 80 | pasteBox.setAttribute("id", "paste_catcher"); 81 | pasteBox.setAttribute("contenteditable", ""); 82 | pasteBox.style.opacity = 0; 83 | 84 | document.body.insertBefore(pasteBox, document.body.firstChild); 85 | 86 | pasteBox.focus(); 87 | self.el.addEventListener("click", function () { pasteBox.focus(); }); 88 | 89 | return pasteBox; 90 | } 91 | 92 | function _loadImage(source) { 93 | var img = new Image(); 94 | self.el.innerHTML = ""; 95 | 96 | img.onload = function () { 97 | //got picture, display it 98 | var imgContainer = document.createElement("img"); 99 | imgContainer.src = img.src; 100 | imgContainer.style.maxHeight = "100%"; 101 | imgContainer.style.maxHeight = "100%"; 102 | self.el.appendChild(imgContainer); 103 | 104 | //empty out the ol' pastecatcher 105 | if (self.pasteCatcher) self.pasteCatcher.innerHTML = ""; 106 | 107 | self.clipImage = img; 108 | 109 | if (typeof self.onpaste === 'function') 110 | self.onpaste(img.src); 111 | }; 112 | 113 | img.src = source; 114 | 115 | self.onpaste.call(self, source.split(",")[1]); //callback(base64, file-type) 116 | } 117 | 118 | function _isElement(obj) { 119 | return typeof HTMLElement === "object" ? obj instanceof HTMLElement : 120 | obj && typeof obj === "object" && obj.nodeType === 1 && typeof obj.nodeName === "string"; 121 | } 122 | 123 | return self.init(selector, callback); 124 | }); -------------------------------------------------------------------------------- /ImageClipboard.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"undefined"!=typeof module?module.exports=t:"function"==typeof define&&define.amd?define(e,t):this[e]=t}("ImageClipboard",function(e,t){"use strict";function n(){var e=document.createElement("div");return e.setAttribute("id","paste_catcher"),e.setAttribute("contenteditable",""),e.style.opacity=0,document.body.insertBefore(e,document.body.firstChild),e.focus(),o.el.addEventListener("click",function(){e.focus()}),e}function a(e){var t=new Image;o.el.innerHTML="",t.onload=function(){var e=document.createElement("img");e.src=t.src,e.style.maxHeight="100%",e.style.maxHeight="100%",o.el.appendChild(e),o.pasteCatcher&&(o.pasteCatcher.innerHTML=""),o.clipImage=t,"function"==typeof o.onpaste&&o.onpaste(t.src)},t.src=e,o.onpaste.call(o,e.split(",")[1])}function i(e){return"object"==typeof HTMLElement?e instanceof HTMLElement:e&&"object"==typeof e&&1===e.nodeType&&"string"==typeof e.nodeName}var o="object"==typeof this?this:{};return o.el=null,o.pasteCatcher=null,o.clipImage=null,o.onpaste=null,o.browserSupport=!0,o.init=function(e,t){if("string"==typeof e)o.el=document.querySelector(e);else{if(!i(e))return!1;o.el=e}return o.pasteCatcher=null,o.clipImage=null,o.onpaste="function"==typeof t?t:function(){},window.Clipboard||(o.pasteCatcher=n()),window.addEventListener("paste",o.pasteHandler),o},o.pasteHandler=function(e){var t;e.clipboardData&&e.clipboardData.items?(t=e.clipboardData.items,t&&(t=Array.prototype.filter.call(t,function(e){return e.type.indexOf("image")>=0}),Array.prototype.forEach.call(t,function(e){var t=e.getAsFile(),n=new FileReader;n.onloadend=function(){a(n.result)},n.readAsDataURL(t)}))):o.pasteCatcher&&setTimeout(function(){var e=o.pasteCatcher.firstElementChild;e&&"IMG"==e.tagName&&a(e.src)},5)},o.init(e,t)}); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Install 2 | ``` 3 | bower install image-clipboard 4 | ``` 5 | 6 | ### Paste images from clipboard to your site. 7 | 8 | 9 | ```html 10 |
11 | 12 | 28 | ``` 29 | 30 | Tested on the latest versions of Chrome, Firefox and Opera. Not tested on Safari. 31 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "image-clipboard", 3 | "version": "0.0.1", 4 | "authors": [ 5 | "jorgenbs " 6 | ], 7 | "description": "Insert images from clipboard. Works on chrome, firefox and Opera", 8 | "main": "ClipBoard.js", 9 | "keywords": [ 10 | "clipboard", 11 | "image", 12 | "copy", 13 | "paste" 14 | ], 15 | "homepage": "https://github.com/jorgenbs/ImageClipboard", 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests", 23 | "gulpfile.js", 24 | "package.json" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp') 2 | , watch = require('gulp-watch') 3 | , http = require('http') 4 | , ecstatic = require('ecstatic') 5 | , refresh = require('gulp-livereload') 6 | , lr = require('tiny-lr') 7 | , server = lr() 8 | , uglify = require('gulp-uglify') 9 | , jshint = require('gulp-jshint') 10 | , rename = require('gulp-rename'); 11 | 12 | gulp.task('lr-server', function() { 13 | server.listen(35729, function(err) { 14 | if(err) return console.log(err); 15 | }); 16 | }); 17 | 18 | gulp.task('http', function() { 19 | http.createServer(ecstatic({root: __dirname})).listen(8080); 20 | }); 21 | 22 | gulp.task('compress', function() { 23 | gulp.src('ImageClipboard.js') 24 | .pipe(jshint()) 25 | .pipe(jshint.reporter('default')) 26 | .pipe(uglify({outSourceMaps: false, preserveComments: 'some'})) 27 | .pipe(rename('ImageClipboard.min.js')) 28 | .pipe(gulp.dest('')) 29 | }); 30 | 31 | gulp.task('watch', function () { 32 | gulp.src(['Clipboard.js']) 33 | .pipe(watch()) 34 | .pipe(refresh(server)); 35 | }); 36 | 37 | gulp.task('default', ['http', 'lr-server', 'watch']); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "image-clipboard", 3 | "version": "0.0.0", 4 | "description": "", 5 | "main": "ClipBoard.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "tiny-lr": "0.0.5", 13 | "gulp-livereload": "~0.3.1", 14 | "gulp": "~3.5.0", 15 | "ecstatic": "~0.4.13", 16 | "gulp-watch": "~0.5.0", 17 | "gulp-uglify": "~0.2.0", 18 | "gulp-jshint": "~1.3.4", 19 | "gulp-rename": "~0.2.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 14 | 15 | --------------------------------------------------------------------------------