123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 |
- /*
- * jQuery File Upload Image Preview & Resize Plugin
- * https://github.com/blueimp/jQuery-File-Upload
- *
- * Copyright 2013, Sebastian Tschan
- * https://blueimp.net
- *
- * Licensed under the MIT license:
- * https://opensource.org/licenses/MIT
- */
- /* global define, require */
- (function (factory) {
- 'use strict';
- if (typeof define === 'function' && define.amd) {
- // Register as an anonymous AMD module:
- define([
- 'jquery',
- 'load-image',
- 'load-image-meta',
- 'load-image-scale',
- 'load-image-exif',
- 'load-image-orientation',
- 'canvas-to-blob',
- './jquery.fileupload-process'
- ], factory);
- } else if (typeof exports === 'object') {
- // Node/CommonJS:
- factory(
- require('jquery'),
- require('blueimp-load-image/js/load-image'),
- require('blueimp-load-image/js/load-image-meta'),
- require('blueimp-load-image/js/load-image-scale'),
- require('blueimp-load-image/js/load-image-exif'),
- require('blueimp-load-image/js/load-image-orientation'),
- require('blueimp-canvas-to-blob'),
- require('./jquery.fileupload-process')
- );
- } else {
- // Browser globals:
- factory(window.jQuery, window.loadImage);
- }
- })(function ($, loadImage) {
- 'use strict';
- // Prepend to the default processQueue:
- $.blueimp.fileupload.prototype.options.processQueue.unshift(
- {
- action: 'loadImageMetaData',
- maxMetaDataSize: '@',
- disableImageHead: '@',
- disableMetaDataParsers: '@',
- disableExif: '@',
- disableExifOffsets: '@',
- includeExifTags: '@',
- excludeExifTags: '@',
- disableIptc: '@',
- disableIptcOffsets: '@',
- includeIptcTags: '@',
- excludeIptcTags: '@',
- disabled: '@disableImageMetaDataLoad'
- },
- {
- action: 'loadImage',
- // Use the action as prefix for the "@" options:
- prefix: true,
- fileTypes: '@',
- maxFileSize: '@',
- noRevoke: '@',
- disabled: '@disableImageLoad'
- },
- {
- action: 'resizeImage',
- // Use "image" as prefix for the "@" options:
- prefix: 'image',
- maxWidth: '@',
- maxHeight: '@',
- minWidth: '@',
- minHeight: '@',
- crop: '@',
- orientation: '@',
- forceResize: '@',
- disabled: '@disableImageResize',
- imageSmoothingQuality: '@imageSmoothingQuality'
- },
- {
- action: 'saveImage',
- quality: '@imageQuality',
- type: '@imageType',
- disabled: '@disableImageResize'
- },
- {
- action: 'saveImageMetaData',
- disabled: '@disableImageMetaDataSave'
- },
- {
- action: 'resizeImage',
- // Use "preview" as prefix for the "@" options:
- prefix: 'preview',
- maxWidth: '@',
- maxHeight: '@',
- minWidth: '@',
- minHeight: '@',
- crop: '@',
- orientation: '@',
- thumbnail: '@',
- canvas: '@',
- disabled: '@disableImagePreview'
- },
- {
- action: 'setImage',
- name: '@imagePreviewName',
- disabled: '@disableImagePreview'
- },
- {
- action: 'deleteImageReferences',
- disabled: '@disableImageReferencesDeletion'
- }
- );
- // 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|svg\+xml)$/,
- // The maximum file size of images to load:
- loadImageMaxFileSize: 10000000, // 10MB
- // The maximum width of resized images:
- imageMaxWidth: 1920,
- // The maximum height of resized images:
- imageMaxHeight: 1080,
- // Defines the image orientation (1-8) or takes the orientation
- // value from Exif data if set to true:
- imageOrientation: true,
- // 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,
- // Defines the preview orientation (1-8) or takes the orientation
- // value from Exif data if set to true:
- previewOrientation: true,
- // Create the preview using the Exif data thumbnail:
- previewThumbnail: true,
- // Define if preview images should be cropped or only scaled:
- previewCrop: false,
- // Define if preview images should be resized as canvas elements:
- previewCanvas: true
- },
- processActions: {
- // Loads the image given via data.files and data.index
- // as img element, if the browser supports the File API.
- // 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],
- // eslint-disable-next-line new-cap
- 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) {
- data.img = img;
- }
- dfd.resolveWith(that, [data]);
- },
- options
- )
- ) {
- return 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.
- // Also stores the resized image as preview property.
- // Accepts the options maxWidth, maxHeight, minWidth,
- // minHeight, canvas and crop:
- resizeImage: function (data, options) {
- if (options.disabled || !(data.canvas || data.img)) {
- return data;
- }
- // eslint-disable-next-line no-param-reassign
- options = $.extend({ canvas: true }, options);
- var that = this,
- // eslint-disable-next-line new-cap
- dfd = $.Deferred(),
- img = (options.canvas && data.canvas) || data.img,
- resolve = function (newImg) {
- if (
- newImg &&
- (newImg.width !== img.width ||
- newImg.height !== img.height ||
- options.forceResize)
- ) {
- data[newImg.getContext ? 'canvas' : 'img'] = newImg;
- }
- data.preview = newImg;
- dfd.resolveWith(that, [data]);
- },
- thumbnail,
- thumbnailBlob;
- if (data.exif && options.thumbnail) {
- thumbnail = data.exif.get('Thumbnail');
- thumbnailBlob = thumbnail && thumbnail.get('Blob');
- if (thumbnailBlob) {
- options.orientation = data.exif.get('Orientation');
- loadImage(thumbnailBlob, resolve, options);
- return dfd.promise();
- }
- }
- if (data.orientation) {
- // Prevent orienting the same image twice:
- delete options.orientation;
- } else {
- data.orientation = options.orientation || loadImage.orientation;
- }
- if (img) {
- resolve(loadImage.scale(img, options, data));
- return dfd.promise();
- }
- 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],
- // eslint-disable-next-line new-cap
- dfd = $.Deferred();
- if (data.canvas.toBlob) {
- data.canvas.toBlob(
- function (blob) {
- if (!blob.name) {
- if (file.type === blob.type) {
- blob.name = file.name;
- } else if (file.name) {
- blob.name = file.name.replace(
- /\.\w+$/,
- '.' + blob.type.substr(6)
- );
- }
- }
- // Don't restore invalid meta data:
- if (file.type !== blob.type) {
- delete data.imageHead;
- }
- // Store the created blob at the position
- // of the original file in the files list:
- data.files[data.index] = blob;
- dfd.resolveWith(that, [data]);
- },
- options.type || file.type,
- options.quality
- );
- } else {
- return data;
- }
- return dfd.promise();
- },
- loadImageMetaData: function (data, options) {
- if (options.disabled) {
- return data;
- }
- var that = this,
- // eslint-disable-next-line new-cap
- dfd = $.Deferred();
- loadImage.parseMetaData(
- data.files[data.index],
- function (result) {
- $.extend(data, result);
- dfd.resolveWith(that, [data]);
- },
- options
- );
- return dfd.promise();
- },
- saveImageMetaData: function (data, options) {
- if (
- !(
- data.imageHead &&
- data.canvas &&
- data.canvas.toBlob &&
- !options.disabled
- )
- ) {
- return data;
- }
- var that = this,
- file = data.files[data.index],
- // eslint-disable-next-line new-cap
- dfd = $.Deferred();
- if (data.orientation === true && data.exifOffsets) {
- // Reset Exif Orientation data:
- loadImage.writeExifData(data.imageHead, data, 'Orientation', 1);
- }
- loadImage.replaceHead(file, data.imageHead, function (blob) {
- blob.name = file.name;
- data.files[data.index] = blob;
- dfd.resolveWith(that, [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) {
- if (data.preview && !options.disabled) {
- data.files[data.index][options.name || 'preview'] = data.preview;
- }
- return data;
- },
- deleteImageReferences: function (data, options) {
- if (!options.disabled) {
- delete data.img;
- delete data.canvas;
- delete data.preview;
- delete data.imageHead;
- }
- return data;
- }
- }
- });
- });
|