Dotclear

source: admin/js/jsUpload/jquery.fileupload-resize.js @ 1144:4af82896ca3d

Revision 1144:4af82896ca3d, 7.9 KB checked in by Nicolas <nikrou77@…>, 12 years ago (diff)

Remplacement de l'upload utilisant swfupload par le plugin jQuery-File-Upload

Todo:

  • Gestion des suppressions
  • Gestion des annulations
  • Gestion des mises de l'interface sans rechargement de la page
  • Simplification (moins de javascript) ?
Line 
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}));
Note: See TracBrowser for help on using the repository browser.

Sites map