src/ui/file_manager/gallery/js/image_editor/image_encoder.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 /**
   8  * A namespace class for image encoding functions. All methods are static.
   9  */
  10 function ImageEncoder() {}
  11
  12 /**
  13  * @type {Array.<Object>}
  14  */
  15 ImageEncoder.metadataEncoders = {};
  16
  17 /**
  18  * @param {function(new:ImageEncoder.MetadataEncoder)} constructor
  19  *     // TODO(JSDOC).
  20  * @param {string} mimeType  // TODO(JSDOC).
  21  */
  22 ImageEncoder.registerMetadataEncoder = function(constructor, mimeType) {
  23   ImageEncoder.metadataEncoders[mimeType] = constructor;
  24 };
  25
  26 /**
  27  * Create a metadata encoder.
  28  *
  29  * The encoder will own and modify a copy of the original metadata.
  30  *
  31  * @param {Object} metadata Original metadata.
  32  * @return {ImageEncoder.MetadataEncoder} Created metadata encoder.
  33  */
  34 ImageEncoder.createMetadataEncoder = function(metadata) {
  35   var constructor =
  36       (metadata && ImageEncoder.metadataEncoders[metadata.mimeType]) ||
  37       ImageEncoder.MetadataEncoder;
  38   return new constructor(metadata);
  39 };
  40
  41
  42 /**
  43  * Create a metadata encoder object holding a copy of metadata
  44  * modified according to the properties of the supplied image.
  45  *
  46  * @param {Object} metadata Original metadata.
  47  * @param {HTMLCanvasElement} canvas Canvas to use for metadata.
  48  * @param {number} quality Encoding quality (defaults to 1).
  49  * @return {ImageEncoder.MetadataEncoder} Encoder with encoded metadata.
  50  */
  51 ImageEncoder.encodeMetadata = function(metadata, canvas, quality) {
  52   var encoder = ImageEncoder.createMetadataEncoder(metadata);
  53   encoder.setImageData(canvas);
  54   encoder.setThumbnailData(ImageEncoder.createThumbnail(canvas), quality || 1);
  55   return encoder;
  56 };
  57
  58
  59 /**
  60  * Return a blob with the encoded image with metadata inserted.
  61  * @param {HTMLCanvasElement} canvas The canvas with the image to be encoded.
  62  * @param {ImageEncoder.MetadataEncoder} metadataEncoder Encoder to use.
  63  * @param {number} quality (0..1], Encoding quality, defaults to 0.9.
  64  * @return {Blob} encoded data.
  65  */
  66 ImageEncoder.getBlob = function(canvas, metadataEncoder, quality) {
  67   // Contrary to what one might think 1.0 is not a good default. Opening and
  68   // saving an typical photo taken with consumer camera increases its file size
  69   // by 50-100%.
  70   // Experiments show that 0.9 is much better. It shrinks some photos a bit,
  71   // keeps others about the same size, but does not visibly lower the quality.
  72   quality = quality || 0.9;
  73
  74   ImageUtil.trace.resetTimer('dataurl');
  75   // WebKit does not support canvas.toBlob yet so canvas.toDataURL is
  76   // the only way to use the Chrome built-in image encoder.
  77   var dataURL =
  78       canvas.toDataURL(metadataEncoder.getMetadata().mimeType, quality);
  79   ImageUtil.trace.reportTimer('dataurl');
  80
  81   var encodedImage = ImageEncoder.decodeDataURL(dataURL);
  82
  83   var encodedMetadata = metadataEncoder.encode();
  84
  85   var slices = [];
  86
  87   // TODO(kaznacheev): refactor |stringToArrayBuffer| and |encode| to return
  88   // arrays instead of array buffers.
  89   function appendSlice(arrayBuffer) {
  90     slices.push(new DataView(arrayBuffer));
  91   }
  92
  93   ImageUtil.trace.resetTimer('blob');
  94   if (encodedMetadata.byteLength != 0) {
  95     var metadataRange = metadataEncoder.findInsertionRange(encodedImage);
  96     appendSlice(ImageEncoder.stringToArrayBuffer(
  97         encodedImage, 0, metadataRange.from));
  98
  99     appendSlice(metadataEncoder.encode());
 100
 101     appendSlice(ImageEncoder.stringToArrayBuffer(
 102         encodedImage, metadataRange.to, encodedImage.length));
 103   } else {
 104     appendSlice(ImageEncoder.stringToArrayBuffer(
 105         encodedImage, 0, encodedImage.length));
 106   }
 107   var blob = new Blob(slices, {type: metadataEncoder.getMetadata().mimeType});
 108   ImageUtil.trace.reportTimer('blob');
 109   return blob;
 110 };
 111
 112 /**
 113  * Decode a dataURL into a binary string containing the encoded image.
 114  *
 115  * Why return a string? Calling atob and having the rest of the code deal
 116  * with a string is several times faster than decoding base64 in Javascript.
 117  *
 118  * @param {string} dataURL Data URL to decode.
 119  * @return {string} A binary string (char codes are the actual byte values).
 120  */
 121 ImageEncoder.decodeDataURL = function(dataURL) {
 122   // Skip the prefix ('data:image/<type>;base64,')
 123   var base64string = dataURL.substring(dataURL.indexOf(',') + 1);
 124   return atob(base64string);
 125 };
 126
 127 /**
 128  * Return a thumbnail for an image.
 129  * @param {HTMLCanvasElement} canvas Original image.
 130  * @param {number=} opt_shrinkage Thumbnail should be at least this much smaller
 131  *     than the original image (in each dimension).
 132  * @return {HTMLCanvasElement} Thumbnail canvas.
 133  */
 134 ImageEncoder.createThumbnail = function(canvas, opt_shrinkage) {
 135   var MAX_THUMBNAIL_DIMENSION = 320;
 136
 137   opt_shrinkage = Math.max(opt_shrinkage || 4,
 138                            canvas.width / MAX_THUMBNAIL_DIMENSION,
 139                            canvas.height / MAX_THUMBNAIL_DIMENSION);
 140
 141   var thumbnailCanvas = canvas.ownerDocument.createElement('canvas');
 142   thumbnailCanvas.width = Math.round(canvas.width / opt_shrinkage);
 143   thumbnailCanvas.height = Math.round(canvas.height / opt_shrinkage);
 144
 145   var context = thumbnailCanvas.getContext('2d');
 146   context.drawImage(canvas,
 147       0, 0, canvas.width, canvas.height,
 148       0, 0, thumbnailCanvas.width, thumbnailCanvas.height);
 149
 150   return thumbnailCanvas;
 151 };
 152
 153 /**
 154  * TODO(JSDOC)
 155  * @param {string} string  // TODO(JSDOC).
 156  * @param {number} from  // TODO(JSDOC).
 157  * @param {number} to  // TODO(JSDOC).
 158  * @return {ArrayBuffer}  // TODO(JSDOC).
 159  */
 160 ImageEncoder.stringToArrayBuffer = function(string, from, to) {
 161   var size = to - from;
 162   var array = new Uint8Array(size);
 163   for (var i = 0; i != size; i++) {
 164     array[i] = string.charCodeAt(from + i);
 165   }
 166   return array.buffer;
 167 };
 168
 169 /**
 170  * A base class for a metadata encoder.
 171  *
 172  * Serves as a default metadata encoder for images that none of the metadata
 173  * parsers recognized.
 174  *
 175  * @param {Object} original_metadata Starting metadata.
 176  * @constructor
 177  */
 178 ImageEncoder.MetadataEncoder = function(original_metadata) {
 179   this.metadata_ = MetadataCache.cloneMetadata(original_metadata) || {};
 180   if (this.metadata_.mimeType != 'image/jpeg') {
 181     // Chrome can only encode JPEG and PNG. Force PNG mime type so that we
 182     // can save to file and generate a thumbnail.
 183     this.metadata_.mimeType = 'image/png';
 184   }
 185 };
 186
 187 /**
 188  * TODO(JSDOC)
 189  * @return {Object}   // TODO(JSDOC).
 190  */
 191 ImageEncoder.MetadataEncoder.prototype.getMetadata = function() {
 192   return this.metadata_;
 193 };
 194
 195 /**
 196  * @param {HTMLCanvasElement|Object} canvas Canvas or or anything with
 197  *                                          width and height properties.
 198  */
 199 ImageEncoder.MetadataEncoder.prototype.setImageData = function(canvas) {
 200   this.metadata_.width = canvas.width;
 201   this.metadata_.height = canvas.height;
 202 };
 203
 204 /**
 205  * @param {HTMLCanvasElement} canvas Canvas to use as thumbnail.
 206  * @param {number} quality Thumbnail quality.
 207  */
 208 ImageEncoder.MetadataEncoder.prototype.setThumbnailData =
 209     function(canvas, quality) {
 210   this.metadata_.thumbnailURL =
 211       canvas.toDataURL(this.metadata_.mimeType, quality);
 212   delete this.metadata_.thumbnailTransform;
 213 };
 214
 215 /**
 216  * Return a range where the metadata is (or should be) located.
 217  * @param {string} encodedImage // TODO(JSDOC).
 218  * @return {Object} An object with from and to properties.
 219  */
 220 ImageEncoder.MetadataEncoder.prototype.
 221     findInsertionRange = function(encodedImage) { return {from: 0, to: 0}; };
 222
 223 /**
 224  * Return serialized metadata ready to write to an image file.
 225  * The return type is optimized for passing to Blob.append.
 226  * @return {ArrayBuffer} // TODO(JSDOC).
 227  */
 228 ImageEncoder.MetadataEncoder.prototype.encode = function() {
 229   return new Uint8Array(0).buffer;
 230 };