vue-image-compressor/dist/vue-image-compressor.js

Vue Component for Convert File to base64

/*!
 * Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal)
 * Licensed Under MIT (http://opensource.org/licenses/MIT)
 *  
 * Vue Image Compressor @ Version 0.0.1
 * 
 */
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.VueImageCompressor=n():e.VueImageCompressor=n()}(this,function(){return function(e){function n(a){if(t[a])return t[a].exports;var o=t[a]={exports:{},id:a,loaded:!1};return e[a].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var t={};return n.m=e,n.c=t,n.p="./dist/",n(0)}([function(module,exports,__webpack_require__){eval("'use strict';\n\nvar _vueImageCompressor = __webpack_require__(3);\n\nvar _vueImageCompressor2 = _interopRequireDefault(_vueImageCompressor);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nmodule.exports = _vueImageCompressor2.default;\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/js/plugin.js\n// module id = 0\n// module chunks = 0\n//# sourceURL=webpack:///./src/js/plugin.js?")},function(module,exports,__webpack_require__){eval("\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _base64toblob = __webpack_require__(2);\n\nvar _base64toblob2 = _interopRequireDefault(_base64toblob);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nexports.default = {\n\n  props: {\n    // Image Scale Percentage (1 - 100)\n    scale: {\n      type: Number,\n      default: 100\n    },\n\n    // Image Scale Percentage (1 - 100)\n    quality: {\n      type: Number,\n      default: 100\n    },\n\n    // Pass the files info when it's done\n    done: {\n      type: Function,\n      default: function _default() {}\n    }\n  },\n\n  data: function data() {\n    return {\n      file: {},\n      result: {},\n      reader: {},\n      imgSrc: \"\"\n    };\n  },\n\n\n  watch: {\n    // When Scale and Quality properties has changed, do Redraw\n    scale: function scale() {\n      return this.redraw();\n    },\n    quality: function quality() {\n      return this.redraw();\n    }\n  },\n\n  methods: {\n\n    /*\n      When Input File has changed\n    */\n    onChange: function onChange(e) {\n\n      // get the file\n      this.file = e.target.files[0];\n\n      // Validation\n      var type = this.file.type;\n      var valid = type.indexOf(\"image\") !== -1;\n\n      if (!valid) throw \"File Type Is Not Supported. Upload an image instead\";\n\n      // Make new FileReader\n      this.reader = new FileReader();\n\n      // Convert the file to base64 text\n      this.reader.readAsDataURL(this.file);\n\n      // on reader load somthing...\n      this.reader.onload = this.fileOnLoad;\n    },\n\n\n    /*\n      Draw And Compress The Image\n      @params {String} imgUrl\n    */\n    drawImage: function drawImage(imgUrl) {\n      // Recreate Canvas Element\n      var canvas = document.createElement('canvas');\n      this.canvas = canvas;\n\n      // Set Canvas Context\n      var ctx = this.canvas.getContext('2d');\n\n      // Create New Image\n      var img = new Image();\n      img.src = imgUrl;\n\n      // Image Size After Scaling\n      var scale = this.scale / 100;\n      var width = img.width * scale;\n      var height = img.height * scale;\n\n      // Set Canvas Height And Width According to Image Size And Scale\n      this.canvas.setAttribute('width', width);\n      this.canvas.setAttribute('height', height);\n\n      ctx.drawImage(img, 0, 0, width, height);\n\n      // Quality Of Image\n      var quality = this.quality ? this.quality / 100 : 1;\n\n      // If all files have been proceed\n      var base64 = this.canvas.toDataURL('image/jpeg', quality);\n      var fileName = this.result.file.name;\n      var lastDot = fileName.lastIndexOf(\".\");\n      fileName = fileName.substr(0, lastDot) + '.jpeg';\n\n      var objToPass = {\n        canvas: this.canvas,\n        original: this.result,\n        compressed: {\n          blob: this.toBlob(base64),\n          base64: base64,\n          name: fileName,\n          file: this.buildFile(base64, fileName)\n        }\n      };\n\n      objToPass.compressed.size = Math.round(objToPass.compressed.file.size / 1000) + ' kB';\n      objToPass.compressed.type = \"image/jpeg\";\n\n      this.done(objToPass);\n    },\n\n\n    /*\n      Redraw the canvas\n    */\n    redraw: function redraw() {\n      if (this.result.base64) {\n        this.drawImage(this.result.base64);\n      }\n    },\n\n\n    /*\n      When The File in loaded\n    */\n    fileOnLoad: function fileOnLoad() {\n      // The File\n      var file = this.file;\n\n      // Make a fileInfo Object\n\n      var fileInfo = {\n        name: file.name,\n        type: file.type,\n        size: Math.round(file.size / 1000) + ' kB',\n        base64: this.reader.result,\n        file: file\n      };\n\n      // Push it to the state\n      this.result = fileInfo;\n\n      // DrawImage\n      this.drawImage(this.result.base64);\n    },\n\n\n    // Convert Base64 to Blob\n    toBlob: function toBlob(imgUrl) {\n      var blob = (0, _base64toblob2.default)(imgUrl.split(',')[1], \"image/jpeg\");\n      var url = window.URL.createObjectURL(blob);\n      return url;\n    },\n\n\n    // Convert Blob To File\n    buildFile: function buildFile(blob, name) {\n      return new File([blob], name);\n    }\n  }\n}; //\n//\n//\n//\n//\n//\n\n\n/*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal)\n* Licensed Under MIT (http://opensource.org/licenses/MIT)\n*\n* Vue Image Compressor @ Version 0.0.1\n*\n* refs:\n* https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL\n* https://davidwalsh.name/convert-canvas-image\n* https://beta.webcomponents.org/element/3mp3ri0r/cpol-image\n*\n*/\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/js/components/vue-image-compressor.vue\n// module id = 1\n// module chunks = 0\n//# sourceURL=webpack:///./src/js/components/vue-image-compressor.vue?./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0")},function(module,exports,__webpack_require__){eval("(function() {\n\n  function base64ToBlob(base64, mime) {\n    mime = mime || '';\n    var sliceSize = 1024;\n    var byteChars = window.atob(base64);\n    var byteArrays = [];\n\n    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {\n      var slice = byteChars.slice(offset, offset + sliceSize);\n\n      var byteNumbers = new Array(slice.length);\n      for (var i = 0; i < slice.length; i++) {\n        byteNumbers[i] = slice.charCodeAt(i);\n      }\n\n      var byteArray = new Uint8Array(byteNumbers);\n\n      byteArrays.push(byteArray);\n    }\n\n    return new Blob(byteArrays, {type: mime});\n  }\n\n  if (true) {\n    if (typeof module !== 'undefined' && module.exports) {\n      exports = module.exports = base64ToBlob;\n    }\n    exports.base64ToBlob = base64ToBlob;\n  } else if (typeof define === 'function' && define.amd) {\n    define([], function() {\n      return base64ToBlob;\n    });\n  } else {\n    this.base64ToBlob = base64ToBlob;\n  }\n\n}).call(this);\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/base64toblob/base64toblob.js\n// module id = 2\n// module chunks = 0\n//# sourceURL=webpack:///./~/base64toblob/base64toblob.js?")},function(module,exports,__webpack_require__){eval('var __vue_exports__, __vue_options__\nvar __vue_styles__ = {}\n\n/* script */\n__vue_exports__ = __webpack_require__(1)\n\n/* template */\nvar __vue_template__ = __webpack_require__(4)\n__vue_options__ = __vue_exports__ = __vue_exports__ || {}\nif (\n  typeof __vue_exports__.default === "object" ||\n  typeof __vue_exports__.default === "function"\n) {\n__vue_options__ = __vue_exports__ = __vue_exports__.default\n}\nif (typeof __vue_options__ === "function") {\n  __vue_options__ = __vue_options__.options\n}\n\n__vue_options__.render = __vue_template__.render\n__vue_options__.staticRenderFns = __vue_template__.staticRenderFns\n\nmodule.exports = __vue_exports__\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/js/components/vue-image-compressor.vue\n// module id = 3\n// module chunks = 0\n//# sourceURL=webpack:///./src/js/components/vue-image-compressor.vue?')},function(module,exports){eval('module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n  return _c(\'input\', {\n    attrs: {\n      "type": "file",\n      "multiple": "false"\n    },\n    on: {\n      "change": _vm.onChange\n    }\n  })\n},staticRenderFns: []}\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler.js?id=data-v-870acf5c!./~/vue-loader/lib/selector.js?type=template&index=0!./src/js/components/vue-image-compressor.vue\n// module id = 4\n// module chunks = 0\n//# sourceURL=webpack:///./src/js/components/vue-image-compressor.vue?./~/vue-loader/lib/template-compiler.js?id=data-v-870acf5c!./~/vue-loader/lib/selector.js?type=template&index=0')}])});