Store the flipped state in each tile and render it as such

This will flip each individual tile on a per image bases. However
the tiles are now drawn in the wrong locations. Clipping etc works.
this is implemented for Canvas and HTML renderers.

src/tile.js

@@ -176,6 +176,12 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja
      * @memberof OpenSeadragon.Tile#
      */
     this.size       = null;
+    /**
+     * Whether to flip the tile when rendering.
+     * @member {Boolean} flipped
+     * @memberof OpenSeadragon.Tile#
+     */
+    this.flipped    = false;
     /**
      * The start time of this tile's blending.
      * @member {Number} blendStart
@@ -296,6 +302,10 @@ $.Tile.prototype = {
         this.style.height  = this.size.y + "px";
         this.style.width   = this.size.x + "px";
 
+        if (this.flipped) {
+            this.style.transform = "scaleX(-1)";
+        }
+
         $.setElementOpacity( this.element, this.opacity );
     },
 
@@ -376,13 +386,17 @@ $.Tile.prototype = {
             sourceHeight = rendered.canvas.height;
         }
 
+        context.translate(position.x + size.x / 2, 0);
+        if (this.flipped) {
+            context.scale(-1, 1);
+        }
         context.drawImage(
             rendered.canvas,
             0,
             0,
             sourceWidth,
             sourceHeight,
-            position.x,
+            -size.x / 2,
             position.y,
             size.x,
             size.y

src/tiledimage.js

@@ -849,6 +849,13 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
         this.raiseEvent('clip-change');
     },
 
+    /**
+     * @returns {Boolean} Whether the TiledImage should be flipped before rendering.
+     */
+    getFlip: function() {
+        return !!this.flipped;
+    },
+
     /**
      * @returns {Number} The TiledImage's current opacity.
      */
@@ -1701,6 +1708,7 @@ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility,
     tile.size       = sizeC;
     tile.squaredDistance   = tileSquaredDistance;
     tile.visibility = levelVisibility;
+    tile.flipped = tiledImage.getFlip();
 }
 
 /**

src/viewer.js

@@ -1301,6 +1301,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * @param {Boolean} [options.preload=false]  Default switch for loading hidden images (true loads, false blocks)
      * @param {Number} [options.degrees=0] Initial rotation of the tiled image around
      * its top left corner in degrees.
+     * @param {Boolean} [options.flipped=false] Whether to horizontally flip the image.
      * @param {String} [options.compositeOperation] How the image is composited onto other images.
      * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image,
      * overriding viewer.crossOriginPolicy.
@@ -1463,6 +1464,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     opacity: queueItem.options.opacity,
                     preload: queueItem.options.preload,
                     degrees: queueItem.options.degrees,
+                    flipped: queueItem.options.flipped,
                     compositeOperation: queueItem.options.compositeOperation,
                     springStiffness: _this.springStiffness,
                     animationTime: _this.animationTime,