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