{"version":3,"sources":["webpack:///./src/forms/ImageFilter.vue?4a2e","webpack:///./src/forms/ImageFilter.vue?14ea","webpack:///./src/forms/ImageFilter.vue?75f3","webpack:///./src/forms/ImageFilter.vue","webpack:///src/forms/ImageFilter.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","on","onCancel","_v","directives","name","rawName","value","onFilter","expression","imageUrl","quality","croppaWidth","croppaHeight","$event","onLoadImage","croppa","img","model","callback","$$v","startFilter","onDone","_m","staticStyle","filterImage","brightness","contrast","okFilter","_e","staticRenderFns","component","data","mounted","global","ImageFilter","$","window","resize","resizeInit","methods","imageContainer","$el","find","config","img_ratio","height","width","c","document","createElement","cN","getElementById","ctx","getContext","ctxN","image","naturalWidth","naturalHeight","drawImage","trigger","toDataURL","fileType","src","refresh","imgData","getImageData","d","i","length","factor","putImageData","open","addClass","url","show","setTimeout","removeClass","generateBlob","URL","createObjectURL","blob","watch","css"],"mappings":"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","file":"js/chunk-5f278d5c.91097673.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageFilter.vue?vue&type=style&index=0&id=6afecb27&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageFilter.vue?vue&type=style&index=0&id=6afecb27&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.show)?_c('div',{staticClass:\"imagefilter\"},[_c('a',{staticClass:\"btnClose\",attrs:{\"href\":\"javascript:;\"},on:{\"click\":_vm.onCancel}},[_c('i',{staticClass:\"ti-close\"})]),_vm._v(\" \"),_c('div',{staticClass:\"image-container\"},[_c('croppa',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.onFilter),expression:\"!onFilter\"}],attrs:{\"initial-image\":_vm.imageUrl,\"prevent-white-space\":true,\"show-remove-button\":false,\"quality\":_vm.quality,\"width\":_vm.croppaWidth?_vm.croppaWidth:200,\"height\":_vm.croppaHeight},on:{\"initial-image-loaded\":function($event){_vm.onLoadImage(_vm.croppa.img)}},model:{value:(_vm.croppa),callback:function ($$v) {_vm.croppa=$$v},expression:\"croppa\"}}),_vm._v(\" \"),_c('canvas',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.onFilter),expression:\"onFilter\"}],attrs:{\"id\":\"IFCanvas\"}})],1),_vm._v(\" \"),_c('div',{staticClass:\"control-container\"},[_c('div',{staticClass:\"text-center form-horizontal\"},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.onFilter),expression:\"!onFilter\"}]},[_c('div',[_c('button',{staticClass:\"btn btn-inverted btn-large\",on:{\"click\":_vm.onCancel}},[_c('span',[_vm._v(\"Cancel\")])]),_vm._v(\" \"),_c('button',{staticClass:\"btn btn-info btn-large\",on:{\"click\":function($event){_vm.startFilter()}}},[_c('span',[_vm._v(\"Filter\")])]),_vm._v(\" \"),_c('button',{staticClass:\"btn btn-default btn-large\",on:{\"click\":_vm.onDone}},[_c('span',[_vm._v(\"Done\")])])])]),_vm._v(\" \"),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.onFilter),expression:\"onFilter\"}]},[_c('div',{staticClass:\"form-group\"},[_vm._m(0),_vm._v(\" \"),_c('div',{staticClass:\"col-sm-6\",staticStyle:{\"padding-top\":\"10px\"}},[_c('RangeSlider',{attrs:{\"min\":-50,\"max\":50},on:{\"SlideEnd\":_vm.filterImage},model:{value:(_vm.brightness),callback:function ($$v) {_vm.brightness=$$v},expression:\"brightness\"}})],1)]),_c('br'),_vm._v(\" \"),_c('div',{staticClass:\"form-group\"},[_vm._m(1),_vm._v(\" \"),_c('div',{staticClass:\"col-sm-6\",staticStyle:{\"padding-top\":\"10px\"}},[_c('RangeSlider',{attrs:{\"min\":-50,\"max\":50},on:{\"SlideEnd\":_vm.filterImage},model:{value:(_vm.contrast),callback:function ($$v) {_vm.contrast=$$v},expression:\"contrast\"}})],1)]),_vm._v(\" \"),_c('div',{staticClass:\"save-buttons\"},[_c('button',{staticClass:\"btn btn-inverted btn-large\",on:{\"click\":function($event){_vm.onFilter=false}}},[_c('span',[_vm._v(\"Cancel\")])]),_vm._v(\" \"),_c('button',{staticClass:\"btn btn-default btn-large\",on:{\"click\":_vm.okFilter}},[_c('span',[_vm._v(\"OK\")])])])])])])]):_vm._e()}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',{staticClass:\"col-sm-4\"},[_c('i',{staticClass:\"icon-brightness-contrast\"}),_vm._v(\" Brightness\")])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',{staticClass:\"col-sm-4\"},[_c('i',{staticClass:\"icon-contrast\"}),_vm._v(\" Contrast\")])}]\n\nexport { render, staticRenderFns }","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageFilter.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageFilter.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImageFilter.vue?vue&type=template&id=6afecb27&scoped=true&\"\nimport script from \"./ImageFilter.vue?vue&type=script&lang=js&\"\nexport * from \"./ImageFilter.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ImageFilter.vue?vue&type=style&index=0&id=6afecb27&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"6afecb27\",\n  null\n  \n)\n\nexport default component.exports","<script>\r\nexport default {\r\n  data: ()=>({\r\n    show: false,\r\n    imageUrl: \"\",\r\n    callback: {},\r\n    config: {},\r\n    croppa: {},\r\n    image: new Image(),\r\n    brightness: 0,\r\n    contrast: 0,\r\n    onFilter: false,\r\n    quality: 1,\r\n    croppaWidth: 200,\r\n    croppaHeight: 200,\r\n  }),\r\n  mounted: function(){\r\n    global.ImageFilter = this\r\n    $(window).resize(this.resizeInit);\r\n  },\r\n  methods: {\r\n    imageContainer(){\r\n      return $(this.$el).find('.image-container');\r\n    },\r\n    resizeInit(){\r\n      this.croppaWidth = this.config.img_ratio * this.imageContainer().height();\r\n      this.croppaHeight = this.imageContainer().height();\r\n      if (this.croppaWidth > this.imageContainer().width()){\r\n        this.croppaWidth =  this.imageContainer().width();\r\n        this.croppaHeight = this.imageContainer().width() / this.config.img_ratio;\r\n      }\r\n    },\r\n    startFilter: function (a) {\r\n      this.onFilter = true;\r\n      return this.onLoadImage(this.croppa.img);\r\n    },\r\n    onLoadImage: function (image) {\r\n      this.c = document.createElement(\"canvas\");\r\n      this.cN = document.getElementById(\"IFCanvas\");\r\n      this.ctx = this.c.getContext(\"2d\");\r\n      this.ctxN = this.cN.getContext(\"2d\");\r\n      this.c.width = image.naturalWidth\r\n      this.c.height = image.naturalHeight\r\n      this.cN.width = image.naturalWidth\r\n      this.cN.height = image.naturalHeight\r\n      this.ctx.drawImage(image, 0, 0);\r\n      this.ctxN.drawImage(image, 0, 0);\r\n      // this.quality = (this.c.width > 1200 ? 1200 : this.c.width) / this.croppaWidth;\r\n      if (this.config.img_ratio == 0) {\r\n        this.config.img_ratio = this.c.width / this.c.height;\r\n        $(window).trigger(\"resize\");\r\n      }\r\n    },\r\n    okFilter: function(){\r\n      this.imageUrl = this.cN.toDataURL(this.config.fileType);\r\n      this.croppa.img.src = this.imageUrl;\r\n      this.croppa.refresh();\r\n      this.onFilter = false;\r\n      this.brightness = 0;\r\n      this.contrast = 0;\r\n    },\r\n    filterImage:function(){\r\n      // filter brightness\r\n      var imgData = this.ctx.getImageData(0, 0, this.c.width, this.c.height);\r\n      var d = imgData.data;\r\n      for (var i = 0; i < d.length; i += 4) {\r\n        d[i] += this.brightness;\r\n        d[i + 1] += this.brightness;\r\n        d[i + 2] += this.brightness;\r\n      }\r\n      // filter contrast\r\n      var factor = (259 * (this.contrast + 255)) / (255 * (259 - this.contrast));\r\n      for (i = 0; i < d.length; i += 4) {\r\n        d[i] = factor * (d[i] - 128) + 128;\r\n        d[i + 1] = factor * (d[i + 1] - 128) + 128;\r\n        d[i + 2] = factor * (d[i + 2] - 128) + 128;\r\n      }\r\n      this.ctxN.putImageData(imgData, 0, 0);\r\n    },\r\n    open(url, callback, config = {}){\r\n      $(\"html\").addClass('noScroll');\r\n      this.imageUrl = url\r\n      this.callback = callback\r\n      this.config = config\r\n      this.show = true\r\n      setTimeout(()=>this.resizeInit(),100)\r\n    },\r\n    onCancel: function(){\r\n      this.show = false\r\n      $(\"html\").removeClass('noScroll');\r\n    },\r\n    onDone: function(){\r\n      this.croppa.generateBlob((blob) => {\r\n        var url = URL.createObjectURL(blob)\r\n        this.callback(blob, url);\r\n        this.show = false\r\n        $(\"html\").removeClass('noScroll');\r\n      }, this.config.fileType);\r\n    }\r\n  },\r\n  watch: {\r\n    onFilter: function(value){\r\n      this.imageContainer().css('bottom', value ? 200 : 100);\r\n      $(window).trigger(\"resize\");\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div v-if=\"show\" class=\"imagefilter\">\r\n\t\t<a href=\"javascript:;\" class=\"btnClose\" @click=\"onCancel\"><i class=\"ti-close\"></i></a>\r\n\t\t<div class=\"image-container\">\r\n\t\t\t<croppa v-show=\"!onFilter\" v-model=\"croppa\" :initial-image=\"imageUrl\" :prevent-white-space=\"true\" :show-remove-button=\"false\" :quality=\"quality\" :width=\"croppaWidth?croppaWidth:200\" :height=\"croppaHeight\" @initial-image-loaded=\"onLoadImage(croppa.img)\"></croppa>\r\n\t\t\t<canvas v-show=\"onFilter\" id=\"IFCanvas\"></canvas>\r\n\t\t</div>\r\n\t\t<div class=\"control-container\">\r\n\t\t\t<div class=\"text-center form-horizontal\">\r\n\t\t\t\t<div v-show=\"!onFilter\">\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<button class=\"btn btn-inverted btn-large\" @click=\"onCancel\"><span>Cancel</span></button>\r\n\t\t\t\t\t\t<button class=\"btn btn-info btn-large\" @click=\"startFilter()\"><span>Filter</span></button>\r\n\t\t\t\t\t\t<button class=\"btn btn-default btn-large\" @click=\"onDone\"><span>Done</span></button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div v-show=\"onFilter\">\r\n\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t<label class=\"col-sm-4\"><i class=\"icon-brightness-contrast\"></i> Brightness</label>\r\n\t\t\t\t\t\t<div class=\"col-sm-6\" style=\"padding-top:10px\">\r\n\t\t\t\t\t\t\t<RangeSlider v-model=\"brightness\" :min=\"-50\" :max=\"50\" @SlideEnd=\"filterImage\"></RangeSlider>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div><br>\r\n\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t<label class=\"col-sm-4\"><i class=\"icon-contrast\"></i> Contrast</label>\r\n\t\t\t\t\t\t<div class=\"col-sm-6\" style=\"padding-top:10px\">\r\n\t\t\t\t\t\t\t<RangeSlider v-model=\"contrast\" :min=\"-50\" :max=\"50\" @SlideEnd=\"filterImage\"></RangeSlider>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"save-buttons\">\r\n\t\t\t\t\t\t<button class=\"btn btn-inverted btn-large\" @click=\"onFilter=false\"><span>Cancel</span></button>\r\n\t\t\t\t\t\t<button class=\"btn btn-default btn-large\" @click=\"okFilter\"><span>OK</span></button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.imagefilter{\r\n\tbackground: #2d2d2d;\r\n\tposition: fixed;\r\n\tz-index: 9999;\r\n\ttop: 0px;\r\n\tleft: 0px;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tcolor: #fff;\r\n}\r\n.form-group{\r\n\tdisplay: inline-block;\r\n\twidth: 400px;\r\n}\r\nlabel{\r\n\tfont-weight: 400;\r\n\tcolor: #fff;\r\n}\r\n.btnClose{\r\n\tposition:absolute;\r\n\tright: 30px;\r\n\ttop: 30px;\r\n  z-index: 10;\r\n  i{\r\n    color: #fff;\r\n    font-size: 24px;\r\n  }\r\n}\r\n#IFCanvas{\r\n\tmax-width: 100%;\r\n\tmax-height: 100%;\r\n}\r\n.image-container{\r\n\tposition: absolute;\r\n\ttop: 50px;\r\n\tbottom: 100px;\r\n\tleft: 50px;\r\n\tright: 50px;\r\n\ttext-align: center;\r\n}\r\n.control-container{\r\n\tposition: absolute;\r\n\tbottom: 20px;\r\n\tleft: 50px;\r\n\tright: 50px;\r\n  text-align: center;\r\n  label{\r\n    text-align: right;\r\n  }\r\n}\r\n.btn{\r\n\tborder: 2px solid #f9f9f9;\r\n  margin-right: 10px;\r\n  &:last-child{\r\n    margin-right: 0px;\r\n  }\r\n}\r\n.btn-inverted{\r\n  background: none;\r\n  &:hover, &:focus{\r\n    color: #fff;\r\n  }\r\n}\r\n.jcrop-holder{\r\n\tmargin: auto;\r\n}\r\n</style>\r\n"],"sourceRoot":""}