Demo: add orientation selector.

blueimp · blueimp · commit b86c22f62000 · 2020-04-28T19:41:03.000+09:00
diff --git a/index.html b/index.html
@@ -80,6 +80,24 @@ <h2>Select an image file</h2>
       <input type="url" id="url" placeholder="Image URL" />
     </p>
     <p>Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
+    <p>
+      <label for="orientation">Orientation:</label>
+      <select id="orientation">
+        <option value="0">true: according to the EXIF orientation value</option>
+        <option value="1">1: top-left (original)</option>
+        <option value="2">2: top-right (horizontal flip)</option>
+        <option value="3">3: bottom-right (180° rotate left)</option>
+        <option value="4">4: bottom-left (vertical flip)</option>
+        <option value="5"
+          >5: left-top (vertical flip + 90° rotate right)</option
+        >
+        <option value="6">6: right-top (90° rotate right)</option>
+        <option value="7"
+          >7: right-bottom (horizontal flip + 90° rotate right)</option
+        >
+        <option value="8">8: left-bottom (90° rotate left)</option>
+      </select>
+    </p>
     <h2>Result</h2>
     <p id="actions" style="display: none;">
       <button type="button" id="edit">Edit</button>
diff --git a/js/demo/demo.js b/js/demo/demo.js
@@ -141,7 +141,7 @@ $(function () {
       canvas: true,
       pixelRatio: window.devicePixelRatio,
       downsamplingRatio: 0.5,
-      orientation: true,
+      orientation: Number($('#orientation').val()) || true,
       meta: true
     }
     exifNode.hide().find('table').remove()
@@ -206,6 +206,18 @@ $(function () {
 
   $('#url').on('change paste input', urlChangeHandler)
 
+  $('#orientation').on('change', function () {
+    var img = result.find('img, canvas')[0]
+    if (img) {
+      updateResults(
+        loadImage.scale(img, {
+          pixelRatio: window.devicePixelRatio,
+          orientation: Number($('#orientation').val()) || true
+        })
+      )
+    }
+  })
+
   $('#edit').on('click', function (event) {
     event.preventDefault()
     var imgNode = result.find('img, canvas')
