github.com/apremalal/vamps-core@v1.0.1-0.20161221121535-d430b56ec174/server/webapps/app/base/plugins/jquery-file-upload/js/jquery.fileupload-image.js (about)

     1  /*
     2   * jQuery File Upload Image Preview & Resize Plugin 1.7.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  /* jshint nomen:false */
    13  /* global define, window, Blob */
    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              'load-image-meta',
    23              'load-image-exif',
    24              'load-image-ios',
    25              'canvas-to-blob',
    26              './jquery.fileupload-process.js'
    27          ], factory);
    28      } else {
    29          // Browser globals:
    30          factory(
    31              window.jQuery,
    32              window.loadImage
    33          );
    34      }
    35  }(function ($, loadImage) {
    36      'use strict';
    37  
    38      // Prepend to the default processQueue:
    39      $.blueimp.fileupload.prototype.options.processQueue.unshift(
    40          {
    41              action: 'loadImageMetaData',
    42              disableImageHead: '@',
    43              disableExif: '@',
    44              disableExifThumbnail: '@',
    45              disableExifSub: '@',
    46              disableExifGps: '@',
    47              disabled: '@disableImageMetaDataLoad'
    48          },
    49          {
    50              action: 'loadImage',
    51              // Use the action as prefix for the "@" options:
    52              prefix: true,
    53              fileTypes: '@',
    54              maxFileSize: '@',
    55              noRevoke: '@',
    56              disabled: '@disableImageLoad'
    57          },
    58          {
    59              action: 'resizeImage',
    60              // Use "image" as prefix for the "@" options:
    61              prefix: 'image',
    62              maxWidth: '@',
    63              maxHeight: '@',
    64              minWidth: '@',
    65              minHeight: '@',
    66              crop: '@',
    67              orientation: '@',
    68              forceResize: '@',
    69              disabled: '@disableImageResize'
    70          },
    71          {
    72              action: 'saveImage',
    73              quality: '@imageQuality',
    74              type: '@imageType',
    75              disabled: '@disableImageResize'
    76          },
    77          {
    78              action: 'saveImageMetaData',
    79              disabled: '@disableImageMetaDataSave'
    80          },
    81          {
    82              action: 'resizeImage',
    83              // Use "preview" as prefix for the "@" options:
    84              prefix: 'preview',
    85              maxWidth: '@',
    86              maxHeight: '@',
    87              minWidth: '@',
    88              minHeight: '@',
    89              crop: '@',
    90              orientation: '@',
    91              thumbnail: '@',
    92              canvas: '@',
    93              disabled: '@disableImagePreview'
    94          },
    95          {
    96              action: 'setImage',
    97              name: '@imagePreviewName',
    98              disabled: '@disableImagePreview'
    99          },
   100          {
   101              action: 'deleteImageReferences',
   102              disabled: '@disableImageReferencesDeletion'
   103          }
   104      );
   105  
   106      // The File Upload Resize plugin extends the fileupload widget
   107      // with image resize functionality:
   108      $.widget('blueimp.fileupload', $.blueimp.fileupload, {
   109  
   110          options: {
   111              // The regular expression for the types of images to load:
   112              // matched against the file type:
   113              loadImageFileTypes: /^image\/(gif|jpeg|png|svg\+xml)$/,
   114              // The maximum file size of images to load:
   115              loadImageMaxFileSize: 10000000, // 10MB
   116              // The maximum width of resized images:
   117              imageMaxWidth: 1920,
   118              // The maximum height of resized images:
   119              imageMaxHeight: 1080,
   120              // Defines the image orientation (1-8) or takes the orientation
   121              // value from Exif data if set to true:
   122              imageOrientation: false,
   123              // Define if resized images should be cropped or only scaled:
   124              imageCrop: false,
   125              // Disable the resize image functionality by default:
   126              disableImageResize: true,
   127              // The maximum width of the preview images:
   128              previewMaxWidth: 80,
   129              // The maximum height of the preview images:
   130              previewMaxHeight: 80,
   131              // Defines the preview orientation (1-8) or takes the orientation
   132              // value from Exif data if set to true:
   133              previewOrientation: true,
   134              // Create the preview using the Exif data thumbnail:
   135              previewThumbnail: true,
   136              // Define if preview images should be cropped or only scaled:
   137              previewCrop: false,
   138              // Define if preview images should be resized as canvas elements:
   139              previewCanvas: true
   140          },
   141  
   142          processActions: {
   143  
   144              // Loads the image given via data.files and data.index
   145              // as img element, if the browser supports the File API.
   146              // Accepts the options fileTypes (regular expression)
   147              // and maxFileSize (integer) to limit the files to load:
   148              loadImage: function (data, options) {
   149                  if (options.disabled) {
   150                      return data;
   151                  }
   152                  var that = this,
   153                      file = data.files[data.index],
   154                      dfd = $.Deferred();
   155                  if (($.type(options.maxFileSize) === 'number' &&
   156                              file.size > options.maxFileSize) ||
   157                          (options.fileTypes &&
   158                              !options.fileTypes.test(file.type)) ||
   159                          !loadImage(
   160                              file,
   161                              function (img) {
   162                                  if (img.src) {
   163                                      data.img = img;
   164                                  }
   165                                  dfd.resolveWith(that, [data]);
   166                              },
   167                              options
   168                          )) {
   169                      return data;
   170                  }
   171                  return dfd.promise();
   172              },
   173  
   174              // Resizes the image given as data.canvas or data.img
   175              // and updates data.canvas or data.img with the resized image.
   176              // Also stores the resized image as preview property.
   177              // Accepts the options maxWidth, maxHeight, minWidth,
   178              // minHeight, canvas and crop:
   179              resizeImage: function (data, options) {
   180                  if (options.disabled || !(data.canvas || data.img)) {
   181                      return data;
   182                  }
   183                  options = $.extend({canvas: true}, options);
   184                  var that = this,
   185                      dfd = $.Deferred(),
   186                      img = (options.canvas && data.canvas) || data.img,
   187                      resolve = function (newImg) {
   188                          if (newImg && (newImg.width !== img.width ||
   189                                  newImg.height !== img.height ||
   190                                  options.forceResize)) {
   191                              data[newImg.getContext ? 'canvas' : 'img'] = newImg;
   192                          }
   193                          data.preview = newImg;
   194                          dfd.resolveWith(that, [data]);
   195                      },
   196                      thumbnail;
   197                  if (data.exif) {
   198                      if (options.orientation === true) {
   199                          options.orientation = data.exif.get('Orientation');
   200                      }
   201                      if (options.thumbnail) {
   202                          thumbnail = data.exif.get('Thumbnail');
   203                          if (thumbnail) {
   204                              loadImage(thumbnail, resolve, options);
   205                              return dfd.promise();
   206                          }
   207                      }
   208                      // Prevent orienting the same image twice:
   209                      if (data.orientation) {
   210                          delete options.orientation;
   211                      } else {
   212                          data.orientation = options.orientation;
   213                      }
   214                  }
   215                  if (img) {
   216                      resolve(loadImage.scale(img, options));
   217                      return dfd.promise();
   218                  }
   219                  return data;
   220              },
   221  
   222              // Saves the processed image given as data.canvas
   223              // inplace at data.index of data.files:
   224              saveImage: function (data, options) {
   225                  if (!data.canvas || options.disabled) {
   226                      return data;
   227                  }
   228                  var that = this,
   229                      file = data.files[data.index],
   230                      dfd = $.Deferred();
   231                  if (data.canvas.toBlob) {
   232                      data.canvas.toBlob(
   233                          function (blob) {
   234                              if (!blob.name) {
   235                                  if (file.type === blob.type) {
   236                                      blob.name = file.name;
   237                                  } else if (file.name) {
   238                                      blob.name = file.name.replace(
   239                                          /\..+$/,
   240                                          '.' + blob.type.substr(6)
   241                                      );
   242                                  }
   243                              }
   244                              // Don't restore invalid meta data:
   245                              if (file.type !== blob.type) {
   246                                  delete data.imageHead;
   247                              }
   248                              // Store the created blob at the position
   249                              // of the original file in the files list:
   250                              data.files[data.index] = blob;
   251                              dfd.resolveWith(that, [data]);
   252                          },
   253                          options.type || file.type,
   254                          options.quality
   255                      );
   256                  } else {
   257                      return data;
   258                  }
   259                  return dfd.promise();
   260              },
   261  
   262              loadImageMetaData: function (data, options) {
   263                  if (options.disabled) {
   264                      return data;
   265                  }
   266                  var that = this,
   267                      dfd = $.Deferred();
   268                  loadImage.parseMetaData(data.files[data.index], function (result) {
   269                      $.extend(data, result);
   270                      dfd.resolveWith(that, [data]);
   271                  }, options);
   272                  return dfd.promise();
   273              },
   274  
   275              saveImageMetaData: function (data, options) {
   276                  if (!(data.imageHead && data.canvas &&
   277                          data.canvas.toBlob && !options.disabled)) {
   278                      return data;
   279                  }
   280                  var file = data.files[data.index],
   281                      blob = new Blob([
   282                          data.imageHead,
   283                          // Resized images always have a head size of 20 bytes,
   284                          // including the JPEG marker and a minimal JFIF header:
   285                          this._blobSlice.call(file, 20)
   286                      ], {type: file.type});
   287                  blob.name = file.name;
   288                  data.files[data.index] = blob;
   289                  return data;
   290              },
   291  
   292              // Sets the resized version of the image as a property of the
   293              // file object, must be called after "saveImage":
   294              setImage: function (data, options) {
   295                  if (data.preview && !options.disabled) {
   296                      data.files[data.index][options.name || 'preview'] = data.preview;
   297                  }
   298                  return data;
   299              },
   300  
   301              deleteImageReferences: function (data, options) {
   302                  if (!options.disabled) {
   303                      delete data.img;
   304                      delete data.canvas;
   305                      delete data.preview;
   306                      delete data.imageHead;
   307                  }
   308                  return data;
   309              }
   310  
   311          }
   312  
   313      });
   314  
   315  }));