| 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 | })); |
|---|