https://ntsk.ru/js/fileupload/jquery.fileupload-image.js

1/*
2 * jQuery File Upload Image Preview & Resize Plugin 1.7.3
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/* jshint nomen:false */
13/* global define, require, window, Blob */
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            'load-image-meta',
23            'load-image-exif',
24            'load-image-ios',
25            'canvas-to-blob',
26            './jquery.fileupload-process'
27        ], factory);
28    } else if (typeof exports === 'object') {
29        // Node/CommonJS:
30        factory(
31            require('jquery'),
32            require('load-image')
33        );
34    } else {
35        // Browser globals:
36        factory(
37            window.jQuery,
38            window.loadImage
39        );
40    }
41}(function ($, loadImage) {
42    'use strict';
43
44    // Prepend to the default processQueue:
45    $.blueimp.fileupload.prototype.options.processQueue.unshift(
46        {
47            action: 'loadImageMetaData',
48            disableImageHead: '@',
49            disableExif: '@',
50            disableExifThumbnail: '@',
51            disableExifSub: '@',
52            disableExifGps: '@',
53            disabled: '@disableImageMetaDataLoad'
54        },
55        {
56            action: 'loadImage',
57            // Use the action as prefix for the "@" options:
58            prefix: true,
59            fileTypes: '@',
60            maxFileSize: '@',
61            noRevoke: '@',
62            disabled: '@disableImageLoad'
63        },
64        {
65            action: 'resizeImage',
66            // Use "image" as prefix for the "@" options:
67            prefix: 'image',
68            maxWidth: '@',
69            maxHeight: '@',
70            minWidth: '@',
71            minHeight: '@',
72            crop: '@',
73            orientation: '@',
74            forceResize: '@',
75            disabled: '@disableImageResize'
76        },
77        {
78            action: 'saveImage',
79            quality: '@imageQuality',
80            type: '@imageType',
81            disabled: '@disableImageResize'
82        },
83        {
84            action: 'saveImageMetaData',
85            disabled: '@disableImageMetaDataSave'
86        },
87        {
88            action: 'resizeImage',
89            // Use "preview" as prefix for the "@" options:
90            prefix: 'preview',
91            maxWidth: '@',
92            maxHeight: '@',
93            minWidth: '@',
94            minHeight: '@',
95            crop: '@',
96            orientation: '@',
97            thumbnail: '@',
98            canvas: '@',
99            disabled: '@disableImagePreview'
100        },
101        {
102            action: 'setImage',
103            name: '@imagePreviewName',
104            disabled: '@disableImagePreview'
105        },
106        {
107            action: 'deleteImageReferences',
108            disabled: '@disableImageReferencesDeletion'
109        }
110    );
111
112    // The File Upload Resize plugin extends the fileupload widget
113    // with image resize functionality:
114    $.widget('blueimp.fileupload', $.blueimp.fileupload, {
115
116        options: {
117            // The regular expression for the types of images to load:
118            // matched against the file type:
119            loadImageFileTypes: /^image\/(gif|jpeg|png|svg\+xml)$/,
120            // The maximum file size of images to load:
121            loadImageMaxFileSize: 10000000, // 10MB
122            // The maximum width of resized images:
123            imageMaxWidth: 1920,
124            // The maximum height of resized images:
125            imageMaxHeight: 1080,
126            // Defines the image orientation (1-8) or takes the orientation
127            // value from Exif data if set to true:
128            imageOrientation: false,
129            // Define if resized images should be cropped or only scaled:
130            imageCrop: false,
131            // Disable the resize image functionality by default:
132            disableImageResize: true,
133            // The maximum width of the preview images:
134            previewMaxWidth: 80,
135            // The maximum height of the preview images:
136            previewMaxHeight: 80,
137            // Defines the preview orientation (1-8) or takes the orientation
138            // value from Exif data if set to true:
139            previewOrientation: true,
140            // Create the preview using the Exif data thumbnail:
141            previewThumbnail: true,
142            // Define if preview images should be cropped or only scaled:
143            previewCrop: false,
144            // Define if preview images should be resized as canvas elements:
145            previewCanvas: true
146        },
147
148        processActions: {
149
150            // Loads the image given via data.files and data.index
151            // as img element, if the browser supports the File API.
152            // Accepts the options fileTypes (regular expression)
153            // and maxFileSize (integer) to limit the files to load:
154            loadImage: function (data, options) {
155                if (options.disabled) {
156                    return data;
157                }
158                var that = this,
159                    file = data.files[data.index],
160                    dfd = $.Deferred();
161                if (($.type(options.maxFileSize) === 'number' &&
162                            file.size > options.maxFileSize) ||
163                        (options.fileTypes &&
164                            !options.fileTypes.test(file.type)) ||
165                        !loadImage(
166                            file,
167                            function (img) {
168                                if (img.src) {
169                                    data.img = img;
170                                }
171                                dfd.resolveWith(that, [data]);
172                            },
173                            options
174                        )) {
175                    return data;
176                }
177                return dfd.promise();
178            },
179
180            // Resizes the image given as data.canvas or data.img
181            // and updates data.canvas or data.img with the resized image.
182            // Also stores the resized image as preview property.
183            // Accepts the options maxWidth, maxHeight, minWidth,
184            // minHeight, canvas and crop:
185            resizeImage: function (data, options) {
186                if (options.disabled || !(data.canvas || data.img)) {
187                    return data;
188                }
189                options = $.extend({canvas: true}, options);
190                var that = this,
191                    dfd = $.Deferred(),
192                    img = (options.canvas && data.canvas) || data.img,
193                    resolve = function (newImg) {
194                        if (newImg && (newImg.width !== img.width ||

195                                newImg.height !== img.height ||
196                                options.forceResize)) {
197                            data[newImg.getContext ? 'canvas' : 'img'] = newImg;
198                        }
199                        data.preview = newImg;
200                        dfd.resolveWith(that, [data]);
201                    },
202                    thumbnail;
203                if (data.exif) {
204                    if (options.orientation === true) {
205                        options.orientation = data.exif.get('Orientation');
206                    }
207                    if (options.thumbnail) {
208                        thumbnail = data.exif.get('Thumbnail');
209                        if (thumbnail) {
210                            loadImage(thumbnail, resolve, options);
211                            return dfd.promise();
212                        }
213                    }
214                    // Prevent orienting the same image twice:
215                    if (data.orientation) {
216                        delete options.orientation;
217                    } else {
218                        data.orientation = options.orientation;
219                    }
220                }
221                if (img) {
222                    resolve(loadImage.scale(img, options));
223                    return dfd.promise();
224                }
225                return data;
226            },
227
228            // Saves the processed image given as data.canvas
229            // inplace at data.index of data.files:
230            saveImage: function (data, options) {
231                if (!data.canvas || options.disabled) {
232                    return data;
233                }
234                var that = this,
235                    file = data.files[data.index],
236                    dfd = $.Deferred();
237                if (data.canvas.toBlob) {
238                    data.canvas.toBlob(
239                        function (blob) {
240                            if (!blob.name) {
241                                if (file.type === blob.type) {
242                                    blob.name = file.name;
243                                } else if (file.name) {
244                                    blob.name = file.name.replace(
245                                        /\..+$/,
246                                        '.' + blob.type.substr(6)
247                                    );
248                                }
249                            }
250                            // Don't restore invalid meta data:
251                            if (file.type !== blob.type) {
252                                delete data.imageHead;
253                            }
254                            // Store the created blob at the position
255                            // of the original file in the files list:
256                            data.files[data.index] = blob;
257                            dfd.resolveWith(that, [data]);
258                        },
259                        options.type || file.type,
260                        options.quality
261                    );
262                } else {
263                    return data;
264                }
265                return dfd.promise();
266            },
267
268            loadImageMetaData: function (data, options) {
269                if (options.disabled) {
270                    return data;
271                }
272                var that = this,
273                    dfd = $.Deferred();
274                loadImage.parseMetaData(data.files[data.index], function (result) {
275                    $.extend(data, result);
276                    dfd.resolveWith(that, [data]);
277                }, options);
278                return dfd.promise();
279            },
280
281            saveImageMetaData: function (data, options) {
282                if (!(data.imageHead && data.canvas &&
283                        data.canvas.toBlob && !options.disabled)) {
284                    return data;
285                }
286                var file = data.files[data.index],
287                    blob = new Blob([
288                        data.imageHead,
289                        // Resized images always have a head size of 20 bytes,
290                        // including the JPEG marker and a minimal JFIF header:
291                        this._blobSlice.call(file, 20)
292                    ], {type: file.type});
293                blob.name = file.name;
294                data.files[data.index] = blob;
295                return data;
296            },
297

298            // Sets the resized version of the image as a property of the
299            // file object, must be called after "saveImage":
300            setImage: function (data, options) {
301                if (data.preview && !options.disabled) {
302                    data.files[data.index][options.name || 'preview'] = data.preview;
303                }
304                return data;
305            },
306
307            deleteImageReferences: function (data, options) {
308                if (!options.disabled) {
309                    delete data.img;
310                    delete data.canvas;
311                    delete data.preview;
312                    delete data.imageHead;
313                }
314                return data;
315            }
316
317        }
318
319    });
320
321}));