Add pixelRatio option.

blueimp · blueimp · commit 9618af0154f6 · 2016-02-22T04:26:04.000+01:00
Adjust orientation with enabled pixelRatio.
Update tests.
diff --git a/README.md b/README.md
@@ -162,41 +162,47 @@ The optional third argument to **loadImage()** is a map of options:
 * **minHeight**: Defines the minimum height of the img/canvas element.
 * **sourceWidth**: The width of the sub-rectangle of the source image to draw
 into the destination canvas.  
-Defaults to the source image width and requires *canvas: true*.
+Defaults to the source image width and requires `canvas: true`.
 * **sourceHeight**: The height of the sub-rectangle of the source image to draw
 into the destination canvas.  
-Defaults to the source image height and requires *canvas: true*.
+Defaults to the source image height and requires `canvas: true`.
 * **top**: The top margin of the sub-rectangle of the source image.  
-Defaults to *0* and requires *canvas: true*.
+Defaults to `0` and requires `canvas: true`.
 * **right**: The right margin of the sub-rectangle of the source image.  
-Defaults to *0* and requires *canvas: true*.
+Defaults to `0` and requires `canvas: true`.
 * **bottom**: The bottom margin of the sub-rectangle of the source image.  
-Defaults to *0* and requires *canvas: true*.
+Defaults to `0` and requires `canvas: true`.
 * **left**: The left margin of the sub-rectangle of the source image.  
-Defaults to *0* and requires *canvas: true*.
+Defaults to `0` and requires `canvas: true`.
 * **contain**: Scales the image up/down to contain it in the max dimensions if
-set to *true*.  
+set to `true`.  
 This emulates the CSS feature
 [background-image: contain](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain).
-* **cover**: Scales the image up/down to cover the max dimensions with the image dimensions if set to *true*.  
+* **cover**: Scales the image up/down to cover the max dimensions with the image
+dimensions if set to `true`.  
 This emulates the CSS feature
 [background-image: cover](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#cover).
 * **aspectRatio**: Crops the image to the given aspect ratio (e.g. `16/9`).  
-This feature assumes *crop: true*.
+Setting the `aspectRatio` also enables the `crop` option.
+* **pixelRatio**: Defines the ratio of the canvas pixels to the physical image
+pixels on the screen.  
+Should be set to `window.devicePixelRatio` unless the scaled image is not
+rendered on screen.  
+Requires `canvas: true`.
 * **crop**: Crops the image to the maxWidth/maxHeight constraints if set to
-*true*.  
-This feature assumes *canvas: true*.
+`true`.  
+Enabling the `crop` option also enables the `canvas` option.
 * **orientation**: Allows to transform the canvas coordinates according to the
 EXIF orientation specification.  
-This feature assumes *canvas: true*.
+Setting the `orientation` also enables the `canvas` option.
 * **canvas**: Returns the image as
-[canvas](https://developer.mozilla.org/en/HTML/Canvas) element if set to *true*.
+[canvas](https://developer.mozilla.org/en/HTML/Canvas) element if set to `true`.
 * **crossOrigin**: Sets the crossOrigin property on the img element for loading
 [CORS enabled images](https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image).
 * **noRevoke**: By default, the
 [created object URL](https://developer.mozilla.org/en/DOM/window.URL.createObjectURL)
 is revoked after the image has been loaded, except when this option is set to
-*true*.
+`true`.
 
 They can be used the following way:
 
diff --git a/js/demo.js b/js/demo.js
@@ -77,7 +77,8 @@ $(function () {
     var file = target && target.files && target.files[0]
     var options = {
       maxWidth: result.width(),
-      canvas: true
+      canvas: true,
+      pixelRatio: window.devicePixelRatio
     }
     if (!file) {
       return
@@ -108,8 +109,14 @@ $(function () {
     event.preventDefault()
     var imgNode = result.find('img, canvas')
     var img = imgNode[0]
+    var pixelRatio = window.devicePixelRatio || 1
     imgNode.Jcrop({
-      setSelect: [40, 40, img.width - 40, img.height - 40],
+      setSelect: [
+        40,
+        40,
+        (img.width / pixelRatio) - 40,
+        (img.height / pixelRatio) - 40
+      ],
       onSelect: function (coords) {
         coordinates = coords
       },
@@ -123,13 +130,16 @@ $(function () {
   $('#crop').on('click', function (event) {
     event.preventDefault()
     var img = result.find('img, canvas')[0]
+    var pixelRatio = window.devicePixelRatio || 1
     if (img && coordinates) {
       replaceResults(loadImage.scale(img, {
-        left: coordinates.x,
-        top: coordinates.y,
-        sourceWidth: coordinates.w,
-        sourceHeight: coordinates.h,
-        minWidth: result.width()
+        left: coordinates.x * pixelRatio,
+        top: coordinates.y * pixelRatio,
+        sourceWidth: coordinates.w * pixelRatio,
+        sourceHeight: coordinates.h * pixelRatio,
+        minWidth: result.width(),
+        maxWidth: result.width(),
+        pixelRatio: pixelRatio
       }))
       coordinates = null
     }
diff --git a/js/load-image-orientation.js b/js/load-image-orientation.js
@@ -32,8 +32,8 @@
   // This method is used to determine if the target image
   // should be a canvas element:
   loadImage.hasCanvasOption = function (options) {
-    return originalHasCanvasOption.call(loadImage, options) ||
-    options.orientation
+    return !!options.orientation ||
+      originalHasCanvasOption.call(loadImage, options)
   }
 
   // Transform image orientation based on
@@ -43,13 +43,17 @@
     var ctx = canvas.getContext('2d')
     var width = canvas.width
     var height = canvas.height
+    var styleWidth = canvas.style.width
+    var styleHeight = canvas.style.height
     var orientation = options.orientation
     if (!orientation || orientation > 8) {
       return
     }
     if (orientation > 4) {
       canvas.width = height
       canvas.height = width
+      canvas.style.width = styleHeight
+      canvas.style.height = styleWidth
     }
     switch (orientation) {
       case 2:
diff --git a/js/load-image.js b/js/load-image.js
@@ -140,7 +140,7 @@
   // This method is used to determine if the target image
   // should be a canvas element:
   loadImage.hasCanvasOption = function (options) {
-    return options.canvas || options.crop || options.aspectRatio
+    return options.canvas || options.crop || !!options.aspectRatio
   }
 
   // Scales and/or crops the given image (img or canvas HTML element)
@@ -165,7 +165,7 @@
     var sourceHeight
     var sourceX
     var sourceY
-    var devicePixelRatio
+    var pixelRatio
     var tmp
     function scaleUp () {
       var scale = Math.max(
@@ -243,13 +243,13 @@
       }
     }
     if (useCanvas) {
-      devicePixelRatio = window.devicePixelRatio || 1
-      if (devicePixelRatio > 1) {
+      pixelRatio = options.pixelRatio
+      if (pixelRatio > 1) {
         canvas.style.width = destWidth + 'px'
         canvas.style.height = destHeight + 'px'
-        destWidth *= devicePixelRatio
-        destHeight *= devicePixelRatio
-        canvas.getContext('2d').scale(devicePixelRatio, devicePixelRatio)
+        destWidth *= pixelRatio
+        destHeight *= pixelRatio
+        canvas.getContext('2d').scale(pixelRatio, pixelRatio)
       }
       canvas.width = destWidth
       canvas.height = destHeight
diff --git a/test/test.js b/test/test.js
