[1144] | 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 | })); |
---|