| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -188,6 +188,10 @@ Setting the `aspectRatio` also enables the `crop` option. | |||
| 188 | 188 | pixels on the screen. | |
| 189 | 189 | Should be set to `window.devicePixelRatio` unless the scaled image is not | |
| 190 | 190 | rendered on screen. | |
| 191 | + Defaults to `1` and requires `canvas: true`. | ||
| 192 | + * **downsamplingRatio**: Defines the ratio in which the image is downsampled. | ||
| 193 | + By default, images are downsampled in one step. With a ratio of `0.5`, each step | ||
| 194 | + scales the image to half the size, before reaching the target dimensions. | ||
| 191 | 195 | Requires `canvas: true`. | |
| 192 | 196 | * **crop**: Crops the image to the maxWidth/maxHeight constraints if set to | |
| 193 | 197 | `true`. | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -78,7 +78,8 @@ $(function () { | |||
| 78 | 78 | var options = { | |
| 79 | 79 | maxWidth: result.width(), | |
| 80 | 80 | canvas: true, | |
| 81 | - pixelRatio: window.devicePixelRatio | ||
| 81 | + pixelRatio: window.devicePixelRatio, | ||
| 82 | + downsamplingRatio: 0.5 | ||
| 82 | 83 | } | |
| 83 | 84 | if (!file) { | |
| 84 | 85 | return | |
@@ -139,7 +140,8 @@ $(function () { | |||
| 139 | 140 | sourceHeight: coordinates.h * pixelRatio, | |
| 140 | 141 | minWidth: result.width(), | |
| 141 | 142 | maxWidth: result.width(), | |
| 142 | - pixelRatio: pixelRatio | ||
| 143 | + pixelRatio: pixelRatio, | ||
| 144 | + downsamplingRatio: 0.5 | ||
| 143 | 145 | })) | |
| 144 | 146 | coordinates = null | |
| 145 | 147 | } | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -166,6 +166,7 @@ | |||
| 166 | 166 | var sourceX | |
| 167 | 167 | var sourceY | |
| 168 | 168 | var pixelRatio | |
| 169 | + var downsamplingRatio | ||
| 169 | 170 | var tmp | |
| 170 | 171 | function scaleUp () { | |
| 171 | 172 | var scale = Math.max( | |
@@ -251,6 +252,43 @@ | |||
| 251 | 252 | destHeight *= pixelRatio | |
| 252 | 253 | canvas.getContext('2d').scale(pixelRatio, pixelRatio) | |
| 253 | 254 | } | |
| 255 | + downsamplingRatio = options.downsamplingRatio | ||
| 256 | + if (downsamplingRatio > 0 && downsamplingRatio < 1 && | ||
| 257 | + destWidth < sourceWidth && destHeight < sourceHeight) { | ||
| 258 | + while (sourceWidth * downsamplingRatio > destWidth) { | ||
| 259 | + canvas.width = sourceWidth * downsamplingRatio | ||
| 260 | + canvas.height = sourceHeight * downsamplingRatio | ||
| 261 | + loadImage.renderImageToCanvas( | ||
| 262 | + canvas, | ||
| 263 | + img, | ||
| 264 | + sourceX, | ||
| 265 | + sourceY, | ||
| 266 | + sourceWidth, | ||
| 267 | + sourceHeight, | ||
| 268 | + 0, | ||
| 269 | + 0, | ||
| 270 | + canvas.width, | ||
| 271 | + canvas.height | ||
| 272 | + ) | ||
| 273 | + sourceWidth = canvas.width | ||
| 274 | + sourceHeight = canvas.height | ||
| 275 | + img = document.createElement('canvas') | ||
| 276 | + img.width = sourceWidth | ||
| 277 | + img.height = sourceHeight | ||
| 278 | + loadImage.renderImageToCanvas( | ||
| 279 | + img, | ||
| 280 | + canvas, | ||
| 281 | + 0, | ||
| 282 | + 0, | ||
| 283 | + sourceWidth, | ||
| 284 | + sourceHeight, | ||
| 285 | + 0, | ||
| 286 | + 0, | ||
| 287 | + sourceWidth, | ||
| 288 | + sourceHeight | ||
| 289 | + ) | ||
| 290 | + } | ||
| 291 | + } | ||
| 254 | 292 | canvas.width = destWidth | |
| 255 | 293 | canvas.height = destHeight | |
| 256 | 294 | loadImage.transformCoordinates( | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -198,6 +198,14 @@ | |||
| 198 | 198 | }, {maxWidth: 40, canvas: true, pixelRatio: 2})).to.be.ok() | |
| 199 | 199 | }) | |
| 200 | 200 | ||
| 201 | + it('Scale down with the given downsamplingRatio', function (done) { | ||
| 202 | + expect(loadImage(blobGIF, function (img) { | ||
| 203 | + expect(img.width).to.be(20) | ||
| 204 | + expect(img.height).to.be(15) | ||
| 205 | + done() | ||
| 206 | + }, {maxWidth: 20, canvas: true, downsamplingRatio: 0.5})).to.be.ok() | ||
| 207 | + }) | ||
| 208 | + | ||
| 201 | 209 | it('Ignore max settings if image dimensions are smaller', function (done) { | |
| 202 | 210 | expect(loadImage(blobGIF, function (img) { | |
| 203 | 211 | expect(img.width).to.be(80) | |
| Back | FazBrowse Home | New Git URL |
0 commit comments