pasteimg.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. (function($) {
  2. var defaults;
  3. $.event.fix = (function(originalFix) {
  4. return function(event) {
  5. event = originalFix.apply(this, arguments);
  6. if (event.type.indexOf("copy") === 0 || event.type.indexOf("paste") === 0) {
  7. event.clipboardData = event.originalEvent.clipboardData;
  8. }
  9. return event;
  10. };
  11. })($.event.fix);
  12. defaults = {
  13. callback: $.noop,
  14. matchType: /image.*/
  15. };
  16. return ($.fn.pasteImageReader = function(options) {
  17. if (typeof options === "function") {
  18. options = {
  19. callback: options
  20. };
  21. }
  22. options = $.extend({}, defaults, options);
  23. return this.each(function() {
  24. var $this, element;
  25. element = this;
  26. $this = $(this);
  27. return $this.bind("paste", function(event) {
  28. var clipboardData, found;
  29. found = false;
  30. clipboardData = event.clipboardData;
  31. return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
  32. var file, reader;
  33. if (found) {
  34. return;
  35. }
  36. if (
  37. type.match(options.matchType) ||
  38. clipboardData.items[i].type.match(options.matchType)
  39. ) {
  40. file = clipboardData.items[i].getAsFile();
  41. reader = new FileReader();
  42. reader.onload = function(evt) {
  43. return options.callback.call(element, {
  44. dataURL: evt.target.result,
  45. event: evt,
  46. file: file,
  47. name: file.name
  48. });
  49. };
  50. reader.readAsDataURL(file);
  51. return (found = true);
  52. }
  53. });
  54. });
  55. });
  56. });
  57. })(jQuery);
  58. var dataURL, filename;
  59. $("html").pasteImageReader(function(results) {
  60. filename = results.filename, dataURL = results.dataURL;
  61. $data.text(dataURL);
  62. $size.val(results.file.size);
  63. $type.val(results.file.type);
  64. var img = document.createElement("img");
  65. img.src = dataURL;
  66. var w = img.width;
  67. var h = img.height;
  68. $width.val(w);
  69. $height.val(h);
  70. $(".file-info").remove();
  71. $(".datei").value = dataURL;
  72. return $(".file")
  73. .css({
  74. backgroundImage: "url(" + dataURL + ")"
  75. })
  76. .data({ width: w, height: h });
  77. });
  78. var $data, $size, $type, $width, $height;
  79. $(function() {
  80. $data = $(".data");
  81. $size = $(".size");
  82. $type = $(".type");
  83. $width = $("#width");
  84. $height = $("#height");
  85. var $this = $(".file");
  86. var bi = $this.css("background-image");
  87. if (bi != "none") {
  88. $data.text(bi.substr(4, bi.length - 6));
  89. }
  90. $this.addClass("contain");
  91. $width.val($this.data("width"));
  92. $height.val($this.data("height"));
  93. if ($this.hasClass("contain")) {
  94. $this.css({
  95. width: $this.data("width"),
  96. height: $this.data("height"),
  97. "z-index": "10"
  98. });
  99. } else {
  100. $this.css({ width: "", height: "", "z-index": "" });
  101. }
  102. });
  103. var readURL = function(input) {
  104. if (input.files && input.files[0]) {
  105. var reader = new FileReader();
  106. reader.onload = function (e) {
  107. // $('.file').attr('src', e.target.result);
  108. dataURL = e.target.result;
  109. $data.text(dataURL);
  110. var img = document.createElement("img");
  111. img.src = dataURL;
  112. $(".file-info").remove();
  113. return $(".file")
  114. .css({
  115. backgroundImage: "url(" + dataURL + ")"
  116. });
  117. }
  118. reader.readAsDataURL(input.files[0]);
  119. }
  120. }
  121. $(".file-upload").on('change', function(){
  122. readURL(this);
  123. });
  124. $(".upload-button").on('click', function() {
  125. $(".file-upload").click();
  126. });
  127. $(".file").on('click', function() {
  128. $(".file-upload").click();
  129. });