1 | /* |
---|
2 | * jQuery File Upload Image Resize Plugin 1.1.2 |
---|
3 | * https://github.com/blueimp/jQuery-File-Upload |
---|
4 | * |
---|
5 | * Copyright 2013, Sebastian Tschan |
---|
6 | * https://blueimp.net |
---|
7 | * |
---|
8 | * Licensed under the MIT license: |
---|
9 | * http://www.opensource.org/licenses/MIT |
---|
10 | */ |
---|
11 | |
---|
12 | /*jslint nomen: true, unparam: true, regexp: true */ |
---|
13 | /*global define, window */ |
---|
14 | |
---|
15 | (function (factory) { |
---|
16 | 'use strict'; |
---|
17 | if (typeof define === 'function' && define.amd) { |
---|
18 | // Register as an anonymous AMD module: |
---|
19 | define([ |
---|
20 | 'jquery', |
---|
21 | 'load-image', |
---|
22 | 'canvas-to-blob', |
---|
23 | './jquery.fileupload-process' |
---|
24 | ], factory); |
---|
25 | } else { |
---|
26 | // Browser globals: |
---|
27 | factory( |
---|
28 | window.jQuery, |
---|
29 | window.loadImage |
---|
30 | ); |
---|
31 | } |
---|
32 | }(function ($, loadImage) { |
---|
33 | 'use strict'; |
---|
34 | |
---|
35 | // Prepend to the default processQueue: |
---|
36 | $.blueimp.fileupload.prototype.options.processQueue.unshift( |
---|
37 | { |
---|
38 | action: 'loadImage', |
---|
39 | fileTypes: '@loadImageFileTypes', |
---|
40 | maxFileSize: '@loadImageMaxFileSize', |
---|
41 | noRevoke: '@loadImageNoRevoke', |
---|
42 | disabled: '@disableImageLoad' |
---|
43 | }, |
---|
44 | { |
---|
45 | action: 'resizeImage', |
---|
46 | maxWidth: '@imageMaxWidth', |
---|
47 | maxHeight: '@imageMaxHeight', |
---|
48 | minWidth: '@imageMinWidth', |
---|
49 | minHeight: '@imageMinHeight', |
---|
50 | crop: '@imageCrop', |
---|
51 | disabled: '@disableImageResize' |
---|
52 | }, |
---|
53 | { |
---|
54 | action: 'saveImage', |
---|
55 | disabled: '@disableImageResize' |
---|
56 | }, |
---|
57 | { |
---|
58 | action: 'resizeImage', |
---|
59 | maxWidth: '@previewMaxWidth', |
---|
60 | maxHeight: '@previewMaxHeight', |
---|
61 | minWidth: '@previewMinWidth', |
---|
62 | minHeight: '@previewMinHeight', |
---|
63 | crop: '@previewCrop', |
---|
64 | canvas: '@previewAsCanvas', |
---|
65 | disabled: '@disableImagePreview' |
---|
66 | }, |
---|
67 | { |
---|
68 | action: 'setImage', |
---|
69 | // The name of the property the resized image |
---|
70 | // is saved as on the associated file object: |
---|
71 | name: 'preview', |
---|
72 | disabled: '@disableImagePreview' |
---|
73 | } |
---|
74 | ); |
---|
75 | |
---|
76 | // The File Upload Resize plugin extends the fileupload widget |
---|
77 | // with image resize functionality: |
---|
78 | $.widget('blueimp.fileupload', $.blueimp.fileupload, { |
---|
79 | |
---|
80 | options: { |
---|
81 | // The regular expression for the types of images to load: |
---|
82 | // matched against the file type: |
---|
83 | loadImageFileTypes: /^image\/(gif|jpeg|png)$/, |
---|
84 | // The maximum file size of images to load: |
---|
85 | loadImageMaxFileSize: 5000000, // 5MB |
---|
86 | // The maximum width of resized images: |
---|
87 | imageMaxWidth: 1920, |
---|
88 | // The maximum height of resized images: |
---|
89 | imageMaxHeight: 1080, |
---|
90 | // Define if resized images should be cropped or only scaled: |
---|
91 | imageCrop: false, |
---|
92 | // Disable the resize image functionality by default: |
---|
93 | disableImageResize: true, |
---|
94 | // The maximum width of the preview images: |
---|
95 | previewMaxWidth: 80, |
---|
96 | // The maximum height of the preview images: |
---|
97 | previewMaxHeight: 80, |
---|
98 | // Define if preview images should be cropped or only scaled: |
---|
99 | previewCrop: false, |
---|
100 | // Define if preview images should be resized as canvas elements: |
---|
101 | previewAsCanvas: true |
---|
102 | }, |
---|
103 | |
---|
104 | processActions: { |
---|
105 | |
---|
106 | // Loads the image given via data.files and data.index |
---|
107 | // as img element if the browser supports canvas. |
---|
108 | // Accepts the options fileTypes (regular expression) |
---|
109 | // and maxFileSize (integer) to limit the files to load: |
---|
110 | loadImage: function (data, options) { |
---|
111 | if (options.disabled) { |
---|
112 | return data; |
---|
113 | } |
---|
114 | var that = this, |
---|
115 | file = data.files[data.index], |
---|
116 | dfd = $.Deferred(); |
---|
117 | if (($.type(options.maxFileSize) === 'number' && |
---|
118 | file.size > options.maxFileSize) || |
---|
119 | (options.fileTypes && |
---|
120 | !options.fileTypes.test(file.type)) || |
---|
121 | !loadImage( |
---|
122 | file, |
---|
123 | function (img) { |
---|
124 | if (!img.src) { |
---|
125 | return dfd.rejectWith(that, [data]); |
---|
126 | } |
---|
127 | data.img = img; |
---|
128 | dfd.resolveWith(that, [data]); |
---|
129 | }, |
---|
130 | options |
---|
131 | )) { |
---|
132 | dfd.rejectWith(that, [data]); |
---|
133 | } |
---|
134 | return dfd.promise(); |
---|
135 | }, |
---|
136 | |
---|
137 | // Resizes the image given as data.canvas or data.img |
---|
138 | // and updates data.canvas or data.img with the resized image. |
---|
139 | // Accepts the options maxWidth, maxHeight, minWidth, |
---|
140 | // minHeight, canvas and crop: |
---|
141 | resizeImage: function (data, options) { |
---|
142 | options = $.extend({canvas: true}, options); |
---|
143 | var img = (options.canvas && data.canvas) || data.img, |
---|
144 | canvas; |
---|
145 | if (img && !options.disabled) { |
---|
146 | canvas = loadImage.scale(img, options); |
---|
147 | if (canvas && (canvas.width !== img.width || |
---|
148 | canvas.height !== img.height)) { |
---|
149 | data[canvas.getContext ? 'canvas' : 'img'] = canvas; |
---|
150 | } |
---|
151 | } |
---|
152 | return data; |
---|
153 | }, |
---|
154 | |
---|
155 | // Saves the processed image given as data.canvas |
---|
156 | // inplace at data.index of data.files: |
---|
157 | saveImage: function (data, options) { |
---|
158 | if (!data.canvas || options.disabled) { |
---|
159 | return data; |
---|
160 | } |
---|
161 | var that = this, |
---|
162 | file = data.files[data.index], |
---|
163 | name = file.name, |
---|
164 | dfd = $.Deferred(), |
---|
165 | callback = function (blob) { |
---|
166 | if (!blob.name) { |
---|
167 | if (file.type === blob.type) { |
---|
168 | blob.name = file.name; |
---|
169 | } else if (file.name) { |
---|
170 | blob.name = file.name.replace( |
---|
171 | /\..+$/, |
---|
172 | '.' + blob.type.substr(6) |
---|
173 | ); |
---|
174 | } |
---|
175 | } |
---|
176 | // Store the created blob at the position |
---|
177 | // of the original file in the files list: |
---|
178 | data.files[data.index] = blob; |
---|
179 | dfd.resolveWith(that, [data]); |
---|
180 | }; |
---|
181 | // Use canvas.mozGetAsFile directly, to retain the filename, as |
---|
182 | // Gecko doesn't support the filename option for FormData.append: |
---|
183 | if (data.canvas.mozGetAsFile) { |
---|
184 | callback(data.canvas.mozGetAsFile( |
---|
185 | (/^image\/(jpeg|png)$/.test(file.type) && name) || |
---|
186 | ((name && name.replace(/\..+$/, '')) || |
---|
187 | 'blob') + '.png', |
---|
188 | file.type |
---|
189 | )); |
---|
190 | } else if (data.canvas.toBlob) { |
---|
191 | data.canvas.toBlob(callback, file.type); |
---|
192 | } else { |
---|
193 | return data; |
---|
194 | } |
---|
195 | return dfd.promise(); |
---|
196 | }, |
---|
197 | |
---|
198 | // Sets the resized version of the image as a property of the |
---|
199 | // file object, must be called after "saveImage": |
---|
200 | setImage: function (data, options) { |
---|
201 | var img = data.canvas || data.img; |
---|
202 | if (img && !options.disabled) { |
---|
203 | data.files[data.index][options.name] = img; |
---|
204 | } |
---|
205 | return data; |
---|
206 | } |
---|
207 | |
---|
208 | } |
---|
209 | |
---|
210 | }); |
---|
211 | |
---|
212 | })); |
---|