3.0 source code

OfficeWeb/vendor/megapixel/LICENSE

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2012 Shinichi Tomita <shinichi.tomita@gmail.com>;
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

OfficeWeb/vendor/megapixel/README.md

@@ -0,0 +1,21 @@
+# Mega pixel image rendering library for iOS6 Safari
+
+Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel), which causes unexpected subsampling when drawing it in canvas.
+By using this library, you can safely render the image with proper stretching.
+
+About iOS Safari's resource limitation and subsampling, see following link:
+[http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15](http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15)
+
+Although it mainly focuses fixing iOS Safari related issues, it can be safely used in the envionments other than iOS6.
+
+
+## Usage
+
+See ./test directory.
+
+
+## FAQ
+Q. Photos from iPhone is rotated and not in correct orientation.
+A. Orientation of jpeg file is recorded in EXIF format. This library won't detect exif information automatically. To detect the information in JavaScript, use exif.js (https://github.com/jseidelin/exif-js).
+
+

OfficeWeb/vendor/megapixel/megapix-image-min.js

@@ -0,0 +1,16 @@
+/**
+ * Mega pixel image rendering library for iOS6 Safari
+ *
+ * Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel),
+ * which causes unexpected subsampling when drawing it in canvas.
+ * By using this library, you can safely render the image with proper stretching.
+ *
+ * Copyright (c) 2012 Shinichi Tomita <shinichi.tomita@gmail.com>
+ * Released under the MIT license
+ */
+(function(){function q(c,a){var b=document.createElement("canvas");r(c,b,a);return b.toDataURL("image/jpeg",a.quality||0.8)}function r(c,a,b){var e=c.naturalWidth,j=c.naturalHeight,f=b.width,g=b.height,m=a.getContext("2d");m.save();b=b.orientation;switch(b){case 5:case 6:case 7:case 8:a.width=g;a.height=f;break;default:a.width=f,a.height=g}a=a.getContext("2d");switch(b){case 2:a.translate(f,0);a.scale(-1,1);break;case 3:a.translate(f,g);a.rotate(Math.PI);break;case 4:a.translate(0,g);a.scale(1,-1);
+break;case 5:a.rotate(0.5*Math.PI);a.scale(1,-1);break;case 6:a.rotate(0.5*Math.PI);a.translate(0,-g);break;case 7:a.rotate(0.5*Math.PI);a.translate(f,-g);a.scale(-1,1);break;case 8:a.rotate(-0.5*Math.PI),a.translate(-f,0)}a=c.naturalWidth;1048576<a*c.naturalHeight?(b=document.createElement("canvas"),b.width=b.height=1,b=b.getContext("2d"),b.drawImage(c,-a+1,0),a=0===b.getImageData(0,0,1,1).data[3]):a=!1;a&&(e/=2,j/=2);a=document.createElement("canvas");a.width=a.height=1024;b=a.getContext("2d");
+var h;h=j;var d=document.createElement("canvas");d.width=1;d.height=h;d=d.getContext("2d");d.drawImage(c,0,0);for(var d=d.getImageData(0,0,1,h).data,n=0,k=h,l=h;l>n;)0===d[4*(l-1)+3]?k=l:n=l,l=k+n>>1;h=l/h;h=0===h?1:h;for(d=0;d<j;){n=d+1024>j?j-d:1024;for(k=0;k<e;){l=k+1024>e?e-k:1024;b.clearRect(0,0,1024,1024);b.drawImage(c,-k,-d);var p=k*f/e<<0,q=Math.ceil(l*f/e),r=d*g/j/h<<0,s=Math.ceil(n*g/j/h);m.drawImage(a,0,0,l,n,p,r,q,s);k+=1024}d+=1024}m.restore()}function p(c){if(c instanceof Blob){var a=
+new Image,b=window.URL&&window.URL.createObjectURL?window.URL:window.webkitURL&&window.webkitURL.createObjectURL?window.webkitURL:null;if(!b)throw Error("No createObjectURL function found to create blob url");a.src=b.createObjectURL(c);c=a}if(!c.naturalWidth&&!c.naturalHeight){var e=this;c.onload=function(){var a=e.imageLoadListeners;if(a){e.imageLoadListeners=null;for(var b=0,c=a.length;b<c;b++)a[b]()}};this.imageLoadListeners=[]}this.srcImage=c}p.prototype.render=function(c,a){if(this.imageLoadListeners){var b=
+this;this.imageLoadListeners.push(function(){b.render(c,a)})}else{a=a||{};var e=this.srcImage.naturalWidth,j=this.srcImage.naturalHeight,f=a.width,g=a.height,m=a.maxWidth,h=a.maxHeight;f&&!g?g=j*f/e<<0:g&&!f?f=e*g/j<<0:(f=e,g=j);m&&f>m&&(f=m,g=j*f/e<<0);h&&g>h&&(g=h,f=e*g/j<<0);var e={width:f,height:g},d;for(d in a)e[d]=a[d];d=c.tagName.toLowerCase();"img"===d?c.src=q(this.srcImage,e):"canvas"===d&&r(this.srcImage,c,e);if("function"===typeof this.onrender)this.onrender(c)}};p.prototype.getUrl=function(){return q(this.srcImage,
+{})};"function"===typeof define&&define.amd?define([],function(){return p}):this.MegaPixImage=p})();

OfficeWeb/vendor/megapixel/src/megapix-image.js

@@ -0,0 +1,256 @@
+/**
+ * Mega pixel image rendering library for iOS6 Safari
+ *
+ * Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel),
+ * which causes unexpected subsampling when drawing it in canvas.
+ * By using this library, you can safely render the image with proper stretching.
+ *
+ * Copyright (c) 2012 Shinichi Tomita <shinichi.tomita@gmail.com>
+ * Released under the MIT license
+ */
+(function() {
+
+  /**
+   * Detect subsampling in loaded image.
+   * In iOS, larger images than 2M pixels may be subsampled in rendering.
+   */
+  function detectSubsampling(img) {
+    var iw = img.naturalWidth, ih = img.naturalHeight;
+    if (iw * ih > 1024 * 1024) { // subsampling may happen over megapixel image
+      var canvas = document.createElement('canvas');
+      canvas.width = canvas.height = 1;
+      var ctx = canvas.getContext('2d');
+      ctx.drawImage(img, -iw + 1, 0);
+      // subsampled image becomes half smaller in rendering size.
+      // check alpha channel value to confirm image is covering edge pixel or not.
+      // if alpha value is 0 image is not covering, hence subsampled.
+      return ctx.getImageData(0, 0, 1, 1).data[3] === 0;
+    } else {
+      return false;
+    }
+  }
+
+  /**
+   * Detecting vertical squash in loaded image.
+   * Fixes a bug which squash image vertically while drawing into canvas for some images.
+   */
+  function detectVerticalSquash(img, iw, ih) {
+    var canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = ih;
+    var ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0);
+    var data = ctx.getImageData(0, 0, 1, ih).data;
+    // search image edge pixel position in case it is squashed vertically.
+    var sy = 0;
+    var ey = ih;
+    var py = ih;
+    while (py > sy) {
+      var alpha = data[(py - 1) * 4 + 3];
+      if (alpha === 0) {
+        ey = py;
+      } else {
+        sy = py;
+      }
+      py = (ey + sy) >> 1;
+    }
+    var ratio = (py / ih);
+    return (ratio===0)?1:ratio;
+  }
+
+  /**
+   * Rendering image element (with resizing) and get its data URL
+   */
+  function renderImageToDataURL(img, options) {
+    var canvas = document.createElement('canvas');
+    renderImageToCanvas(img, canvas, options);
+    return canvas.toDataURL("image/jpeg", options.quality || 0.8);
+  }
+
+  /**
+   * Rendering image element (with resizing) into the canvas element
+   */
+  function renderImageToCanvas(img, canvas, options) {
+    var iw = img.naturalWidth, ih = img.naturalHeight;
+    var width = options.width, height = options.height;
+    var ctx = canvas.getContext('2d');
+    ctx.save();
+    transformCoordinate(canvas, width, height, options.orientation);
+    var subsampled = detectSubsampling(img);
+    if (subsampled) {
+      iw /= 2;
+      ih /= 2;
+    }
+    var d = 1024; // size of tiling canvas
+    var tmpCanvas = document.createElement('canvas');
+    tmpCanvas.width = tmpCanvas.height = d;
+    var tmpCtx = tmpCanvas.getContext('2d');
+    var vertSquashRatio = detectVerticalSquash(img, iw, ih);
+    var sy = 0;
+    while (sy < ih) {
+      var sh = sy + d > ih ? ih - sy : d;
+      var sx = 0;
+      while (sx < iw) {
+        var sw = sx + d > iw ? iw - sx : d;
+        tmpCtx.clearRect(0, 0, d, d);
+        tmpCtx.drawImage(img, -sx, -sy);
+        var dx = (sx * width / iw) << 0;
+        var dw = Math.ceil(sw * width / iw);
+        var dy = (sy * height / ih / vertSquashRatio) << 0;
+        var dh = Math.ceil(sh * height / ih / vertSquashRatio);
+        ctx.drawImage(tmpCanvas, 0, 0, sw, sh, dx, dy, dw, dh);
+        sx += d;
+      }
+      sy += d;
+    }
+    ctx.restore();
+    tmpCanvas = tmpCtx = null;
+  }
+
+  /**
+   * Transform canvas coordination according to specified frame size and orientation
+   * Orientation value is from EXIF tag
+   */
+  function transformCoordinate(canvas, width, height, orientation) {
+    switch (orientation) {
+      case 5:
+      case 6:
+      case 7:
+      case 8:
+        canvas.width = height;
+        canvas.height = width;
+        break;
+      default:
+        canvas.width = width;
+        canvas.height = height;
+    }
+    var ctx = canvas.getContext('2d');
+    switch (orientation) {
+      case 2:
+        // horizontal flip
+        ctx.translate(width, 0);
+        ctx.scale(-1, 1);
+        break;
+      case 3:
+        // 180 rotate left
+        ctx.translate(width, height);
+        ctx.rotate(Math.PI);
+        break;
+      case 4:
+        // vertical flip
+        ctx.translate(0, height);
+        ctx.scale(1, -1);
+        break;
+      case 5:
+        // vertical flip + 90 rotate right
+        ctx.rotate(0.5 * Math.PI);
+        ctx.scale(1, -1);
+        break;
+      case 6:
+        // 90 rotate right
+        ctx.rotate(0.5 * Math.PI);
+        ctx.translate(0, -height);
+        break;
+      case 7:
+        // horizontal flip + 90 rotate right
+        ctx.rotate(0.5 * Math.PI);
+        ctx.translate(width, -height);
+        ctx.scale(-1, 1);
+        break;
+      case 8:
+        // 90 rotate left
+        ctx.rotate(-0.5 * Math.PI);
+        ctx.translate(-width, 0);
+        break;
+      default:
+        break;
+    }
+  }
+
+
+  /**
+   * MegaPixImage class
+   */
+  function MegaPixImage(srcImage) {
+    if (srcImage instanceof Blob) {
+      var img = new Image();
+      var URL = window.URL && window.URL.createObjectURL ? window.URL :
+                window.webkitURL && window.webkitURL.createObjectURL ? window.webkitURL :
+                null;
+      if (!URL) { throw Error("No createObjectURL function found to create blob url"); }
+      img.src = URL.createObjectURL(srcImage);
+      srcImage = img;
+    }
+    if (!srcImage.naturalWidth && !srcImage.naturalHeight) {
+      var _this = this;
+      srcImage.onload = function() {
+        var listeners = _this.imageLoadListeners;
+        if (listeners) {
+          _this.imageLoadListeners = null;
+          for (var i=0, len=listeners.length; i<len; i++) {
+            listeners[i]();
+          }
+        }
+      };
+      this.imageLoadListeners = [];
+    }
+    this.srcImage = srcImage;
+  }
+
+  /**
+   * Rendering megapix image into specified target element
+   */
+  MegaPixImage.prototype.render = function(target, options) {
+    if (this.imageLoadListeners) {
+      var _this = this;
+      this.imageLoadListeners.push(function() { _this.render(target, options) });
+      return;
+    }
+    options = options || {};
+    var imgWidth = this.srcImage.naturalWidth, imgHeight = this.srcImage.naturalHeight,
+        width = options.width, height = options.height,
+        maxWidth = options.maxWidth, maxHeight = options.maxHeight;
+    if (width && !height) {
+      height = (imgHeight * width / imgWidth) << 0;
+    } else if (height && !width) {
+      width = (imgWidth * height / imgHeight) << 0;
+    } else {
+      width = imgWidth;
+      height = imgHeight;
+    }
+    if (maxWidth && width > maxWidth) {
+      width = maxWidth;
+      height = (imgHeight * width / imgWidth) << 0;
+    }
+    if (maxHeight && height > maxHeight) {
+      height = maxHeight;
+      width = (imgWidth * height / imgHeight) << 0;
+    }
+    var opt = { width : width, height : height };
+    for (var k in options) opt[k] = options[k];
+
+    var tagName = target.tagName.toLowerCase();
+    if (tagName === 'img') {
+      target.src = renderImageToDataURL(this.srcImage, opt);
+    } else if (tagName === 'canvas') {
+      renderImageToCanvas(this.srcImage, target, opt);
+    }
+    if (typeof this.onrender === 'function') {
+      this.onrender(target);
+    }
+  };
+
+  MegaPixImage.prototype.getUrl = function() {
+    return renderImageToDataURL(this.srcImage, {});
+  };
+
+  /**
+   * Export class to global
+   */
+  if (typeof define === 'function' && define.amd) {
+    define([], function() { return MegaPixImage; }); // for AMD loader
+  } else {
+    this.MegaPixImage = MegaPixImage;
+  }
+
+})();

OfficeWeb/vendor/megapixel/test/megapix-image.test.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>megapix-image.js test</title>
+    <meta charset="utf-8">
+    <script src="../src/megapix-image.js"></script>
+    <script src="./megapix-image.test.js"></script>
+  </head>
+  <body>
+    Select MegaPixel Photo: <input type="file" id="fileInput">
+    <br/>
+    Image: <br/>
+    <img id="resultImage">
+    <br/>
+    Canvas:<br/>
+    <canvas id="resultCanvas1"></canvas>
+    <br/>
+    Canvas (rotated):<br/>
+    <canvas id="resultCanvas2"></canvas>
+  </body>
+</html>

OfficeWeb/vendor/megapixel/test/megapix-image.test.js

@@ -0,0 +1,23 @@
+window.onload = function() {
+  var fileInput = document.getElementById('fileInput');
+  fileInput.onchange = function() {
+    var file = fileInput.files[0];
+    // MegaPixImage constructor accepts File/Blob object.
+    var mpImg = new MegaPixImage(file);
+
+    // Render resized image into image element using quality option.
+    // Quality option is valid when rendering into image element.
+    var resImg = document.getElementById('resultImage');
+    mpImg.render(resImg, { maxWidth: 300, maxHeight: 300, quality: 0.5 });
+
+    // Render resized image into canvas element.
+    var resCanvas1 = document.getElementById('resultCanvas1');
+    mpImg.render(resCanvas1, { maxWidth: 300, maxHeight: 300 });
+
+    // Render resized image into canvas element, rotating orientation = 6 (90 deg rotate right)
+    // Types of orientation is defined in EXIF specification.
+    // To detect orientation of JPEG file in JS, you can use exif.js from https://github.com/jseidelin/exif-js
+    var resCanvas2 = document.getElementById('resultCanvas2');
+    mpImg.render(resCanvas2, { maxWidth: 300, maxHeight: 300, orientation: 6 });
+  };
+};