1 | ;(function(){
|
2 | (function (global, factory) {
|
3 | if (typeof define === "function" && define.amd) {
|
4 | define(['exports', './image-reader', './image-dataurl', '../_util', '../_style/global.css', './style/index.css'], factory);
|
5 | } else if (typeof exports !== "undefined") {
|
6 | factory(exports, require('./image-reader'), require('./image-dataurl'), require('../_util'), require('../_style/global.css'), require('./style/index.css'));
|
7 | } else {
|
8 | var mod = {
|
9 | exports: {}
|
10 | };
|
11 | factory(mod.exports, global.imageReader, global.imageDataurl, global._util, global.global, global.index);
|
12 | global.index = mod.exports;
|
13 | }
|
14 | })(this, function (exports, _imageReader, _imageDataurl, _util) {
|
15 | 'use strict';
|
16 |
|
17 | Object.defineProperty(exports, "__esModule", {
|
18 | value: true
|
19 | });
|
20 |
|
21 | var _imageReader2 = _interopRequireDefault(_imageReader);
|
22 |
|
23 | function _interopRequireDefault(obj) {
|
24 | return obj && obj.__esModule ? obj : {
|
25 | default: obj
|
26 | };
|
27 | }
|
28 |
|
29 | var ERROR = {
|
30 | '100': 'browser does not support',
|
31 | '101': 'picture size is beyond the preset',
|
32 | '102': 'picture read failure',
|
33 | '103': 'the number of pictures exceeds the limit'
|
34 | };
|
35 |
|
36 | exports.default = {
|
37 | name: 'md-image-reader',
|
38 |
|
39 | props: {
|
40 | name: {
|
41 | type: String,
|
42 | default: function _default() {
|
43 | return (0, _util.randomId)('image-reader');
|
44 | }
|
45 | },
|
46 | size: {
|
47 | type: [String, Number],
|
48 | default: 0
|
49 | },
|
50 | mime: {
|
51 | type: Array,
|
52 | default: function _default() {
|
53 | return [];
|
54 | }
|
55 | },
|
56 | isCameraOnly: {
|
57 | type: Boolean,
|
58 | default: false
|
59 | },
|
60 | isMultiple: {
|
61 | type: Boolean,
|
62 | default: false
|
63 | },
|
64 | amount: {
|
65 | type: Number,
|
66 | default: 0
|
67 | }
|
68 | },
|
69 |
|
70 | data: function data() {
|
71 | return {
|
72 | inputTmpKey: Date.now() };
|
73 | },
|
74 |
|
75 |
|
76 | computed: {
|
77 | mimeType: function mimeType() {
|
78 | if (this.mime.length) {
|
79 | var mimeStr = '';
|
80 | this.mime.forEach(function (type) {
|
81 | mimeStr += 'image/' + type + ',';
|
82 | });
|
83 | return mimeStr.substring(0, mimeStr.length - 1);
|
84 | } else {
|
85 | return 'image/*';
|
86 | }
|
87 | }
|
88 | },
|
89 |
|
90 | methods: {
|
91 | $_emitter: function $_emitter(event, data) {
|
92 | this.$emit(event, this.name, data);
|
93 | },
|
94 | $_openWebWorker: function $_openWebWorker(fn) {
|
95 | return new Worker((0, _util.functionToUrl)(fn));
|
96 | },
|
97 | $_closeWebWorker: function $_closeWebWorker(worker) {
|
98 | worker.terminate();
|
99 | },
|
100 | $_readFile: function $_readFile(fileElement) {
|
101 | var _this = this;
|
102 |
|
103 | var size = +this.size * 1000;
|
104 | var files = fileElement.files;
|
105 | var worker = void 0;
|
106 | var count = 0;
|
107 |
|
108 | if (window.Worker) {
|
109 | worker = this.$_openWebWorker(_imageReader2.default);
|
110 |
|
111 | worker.postMessage({
|
112 | files: files,
|
113 | size: size,
|
114 | isWebWorker: true
|
115 | });
|
116 |
|
117 | worker.onmessage = function (evt) {
|
118 | _this.$_onReaderComplete(evt.data);
|
119 |
|
120 | count++;
|
121 |
|
122 | if (count === files.length) {
|
123 | _this.$_closeWebWorker(worker);
|
124 | }
|
125 | };
|
126 | } else {
|
127 | var imageReader = (0, _imageReader2.default)(window);
|
128 | imageReader({
|
129 | files: files,
|
130 | size: size,
|
131 | isWebWorker: false,
|
132 | complete: this.$_onReaderComplete
|
133 | });
|
134 | }
|
135 | },
|
136 | $_cleaeFile: function $_cleaeFile() {
|
137 | this.inputTmpKey = Date.now();
|
138 | },
|
139 | $_onFileChange: function $_onFileChange(event) {
|
140 | var fileElement = event.target;
|
141 |
|
142 | if (fileElement.files && fileElement.files.length) {
|
143 | this.$_emitter('select', {
|
144 | files: Array.prototype.slice.call(fileElement.files)
|
145 | });
|
146 |
|
147 | if (this.amount && fileElement.files.length > this.amount) {
|
148 | this.$_emitter('error', {
|
149 | code: '103',
|
150 | msg: ERROR['103']
|
151 | });
|
152 | this.$_cleaeFile();
|
153 | return;
|
154 | }
|
155 |
|
156 | this.$_readFile(fileElement);
|
157 | }
|
158 | },
|
159 | $_onReaderComplete: function $_onReaderComplete(_ref) {
|
160 | var errorCode = _ref.errorCode,
|
161 | dataUrl = _ref.dataUrl,
|
162 | file = _ref.file;
|
163 |
|
164 | if (errorCode) {
|
165 | this.$_emitter('error', {
|
166 | code: errorCode,
|
167 | msg: ERROR[errorCode]
|
168 | });
|
169 | return;
|
170 | }
|
171 |
|
172 | this.$_emitter('complete', {
|
173 | blob: (0, _imageDataurl.dataURItoBlob)(dataUrl),
|
174 | dataUrl: dataUrl,
|
175 | file: file
|
176 | });
|
177 | this.$_cleaeFile();
|
178 | }
|
179 | }
|
180 | };
|
181 | });
|
182 | })()
|
183 | if (module.exports.__esModule) module.exports = module.exports.default
|
184 | var __vue__options__ = (typeof module.exports === "function"? module.exports.options: module.exports)
|
185 | __vue__options__.render = function render () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"md-image-reader"},[_c('input',{key:_vm.inputTmpKey,staticClass:"md-image-reader-file",attrs:{"type":"file","name":_vm.name,"accept":_vm.mimeType,"capture":_vm.isCameraOnly,"multiple":_vm.isMultiple},on:{"change":_vm.$_onFileChange}})])}
|
186 | __vue__options__.staticRenderFns = []
|