resize.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. 'use strict';
  2. const is = require('./is');
  3. /**
  4. * Weighting to apply when using contain/cover fit.
  5. * @member
  6. * @private
  7. */
  8. const gravity = {
  9. center: 0,
  10. centre: 0,
  11. north: 1,
  12. east: 2,
  13. south: 3,
  14. west: 4,
  15. northeast: 5,
  16. southeast: 6,
  17. southwest: 7,
  18. northwest: 8
  19. };
  20. /**
  21. * Position to apply when using contain/cover fit.
  22. * @member
  23. * @private
  24. */
  25. const position = {
  26. top: 1,
  27. right: 2,
  28. bottom: 3,
  29. left: 4,
  30. 'right top': 5,
  31. 'right bottom': 6,
  32. 'left bottom': 7,
  33. 'left top': 8
  34. };
  35. /**
  36. * Strategies for automagic cover behaviour.
  37. * @member
  38. * @private
  39. */
  40. const strategy = {
  41. entropy: 16,
  42. attention: 17
  43. };
  44. /**
  45. * Reduction kernels.
  46. * @member
  47. * @private
  48. */
  49. const kernel = {
  50. nearest: 'nearest',
  51. cubic: 'cubic',
  52. mitchell: 'mitchell',
  53. lanczos2: 'lanczos2',
  54. lanczos3: 'lanczos3'
  55. };
  56. /**
  57. * Methods by which an image can be resized to fit the provided dimensions.
  58. * @member
  59. * @private
  60. */
  61. const fit = {
  62. contain: 'contain',
  63. cover: 'cover',
  64. fill: 'fill',
  65. inside: 'inside',
  66. outside: 'outside'
  67. };
  68. /**
  69. * Map external fit property to internal canvas property.
  70. * @member
  71. * @private
  72. */
  73. const mapFitToCanvas = {
  74. contain: 'embed',
  75. cover: 'crop',
  76. fill: 'ignore_aspect',
  77. inside: 'max',
  78. outside: 'min'
  79. };
  80. /**
  81. * @private
  82. */
  83. function isRotationExpected (options) {
  84. return (options.angle % 360) !== 0 || options.useExifOrientation === true || options.rotationAngle !== 0;
  85. }
  86. /**
  87. * Resize image to `width`, `height` or `width x height`.
  88. *
  89. * When both a `width` and `height` are provided, the possible methods by which the image should **fit** these are:
  90. * - `cover`: (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit.
  91. * - `contain`: Preserving aspect ratio, contain within both provided dimensions using "letterboxing" where necessary.
  92. * - `fill`: Ignore the aspect ratio of the input and stretch to both provided dimensions.
  93. * - `inside`: Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified.
  94. * - `outside`: Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified.
  95. *
  96. * Some of these values are based on the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
  97. *
  98. * When using a `fit` of `cover` or `contain`, the default **position** is `centre`. Other options are:
  99. * - `sharp.position`: `top`, `right top`, `right`, `right bottom`, `bottom`, `left bottom`, `left`, `left top`.
  100. * - `sharp.gravity`: `north`, `northeast`, `east`, `southeast`, `south`, `southwest`, `west`, `northwest`, `center` or `centre`.
  101. * - `sharp.strategy`: `cover` only, dynamically crop using either the `entropy` or `attention` strategy.
  102. *
  103. * Some of these values are based on the [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
  104. *
  105. * The experimental strategy-based approach resizes so one dimension is at its target length
  106. * then repeatedly ranks edge regions, discarding the edge with the lowest score based on the selected strategy.
  107. * - `entropy`: focus on the region with the highest [Shannon entropy](https://en.wikipedia.org/wiki/Entropy_%28information_theory%29).
  108. * - `attention`: focus on the region with the highest luminance frequency, colour saturation and presence of skin tones.
  109. *
  110. * Possible interpolation kernels are:
  111. * - `nearest`: Use [nearest neighbour interpolation](http://en.wikipedia.org/wiki/Nearest-neighbor_interpolation).
  112. * - `cubic`: Use a [Catmull-Rom spline](https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline).
  113. * - `mitchell`: Use a [Mitchell-Netravali spline](https://www.cs.utexas.edu/~fussell/courses/cs384g-fall2013/lectures/mitchell/Mitchell.pdf).
  114. * - `lanczos2`: Use a [Lanczos kernel](https://en.wikipedia.org/wiki/Lanczos_resampling#Lanczos_kernel) with `a=2`.
  115. * - `lanczos3`: Use a Lanczos kernel with `a=3` (the default).
  116. *
  117. * @example
  118. * sharp(input)
  119. * .resize({ width: 100 })
  120. * .toBuffer()
  121. * .then(data => {
  122. * // 100 pixels wide, auto-scaled height
  123. * });
  124. *
  125. * @example
  126. * sharp(input)
  127. * .resize({ height: 100 })
  128. * .toBuffer()
  129. * .then(data => {
  130. * // 100 pixels high, auto-scaled width
  131. * });
  132. *
  133. * @example
  134. * sharp(input)
  135. * .resize(200, 300, {
  136. * kernel: sharp.kernel.nearest,
  137. * fit: 'contain',
  138. * position: 'right top',
  139. * background: { r: 255, g: 255, b: 255, alpha: 0.5 }
  140. * })
  141. * .toFile('output.png')
  142. * .then(() => {
  143. * // output.png is a 200 pixels wide and 300 pixels high image
  144. * // containing a nearest-neighbour scaled version
  145. * // contained within the north-east corner of a semi-transparent white canvas
  146. * });
  147. *
  148. * @example
  149. * const transformer = sharp()
  150. * .resize({
  151. * width: 200,
  152. * height: 200,
  153. * fit: sharp.fit.cover,
  154. * position: sharp.strategy.entropy
  155. * });
  156. * // Read image data from readableStream
  157. * // Write 200px square auto-cropped image data to writableStream
  158. * readableStream
  159. * .pipe(transformer)
  160. * .pipe(writableStream);
  161. *
  162. * @example
  163. * sharp(input)
  164. * .resize(200, 200, {
  165. * fit: sharp.fit.inside,
  166. * withoutEnlargement: true
  167. * })
  168. * .toFormat('jpeg')
  169. * .toBuffer()
  170. * .then(function(outputBuffer) {
  171. * // outputBuffer contains JPEG image data
  172. * // no wider and no higher than 200 pixels
  173. * // and no larger than the input image
  174. * });
  175. *
  176. * @example
  177. * const scaleByHalf = await sharp(input)
  178. * .metadata()
  179. * .then(({ width }) => sharp(input)
  180. * .resize(Math.round(width * 0.5))
  181. * .toBuffer()
  182. * );
  183. *
  184. * @param {number} [width] - pixels wide the resultant image should be. Use `null` or `undefined` to auto-scale the width to match the height.
  185. * @param {number} [height] - pixels high the resultant image should be. Use `null` or `undefined` to auto-scale the height to match the width.
  186. * @param {Object} [options]
  187. * @param {String} [options.width] - alternative means of specifying `width`. If both are present this take priority.
  188. * @param {String} [options.height] - alternative means of specifying `height`. If both are present this take priority.
  189. * @param {String} [options.fit='cover'] - how the image should be resized to fit both provided dimensions, one of `cover`, `contain`, `fill`, `inside` or `outside`.
  190. * @param {String} [options.position='centre'] - position, gravity or strategy to use when `fit` is `cover` or `contain`.
  191. * @param {String|Object} [options.background={r: 0, g: 0, b: 0, alpha: 1}] - background colour when using a `fit` of `contain`, parsed by the [color](https://www.npmjs.org/package/color) module, defaults to black without transparency.
  192. * @param {String} [options.kernel='lanczos3'] - the kernel to use for image reduction.
  193. * @param {Boolean} [options.withoutEnlargement=false] - do not enlarge if the width *or* height are already less than the specified dimensions, equivalent to GraphicsMagick's `>` geometry option.
  194. * @param {Boolean} [options.fastShrinkOnLoad=true] - take greater advantage of the JPEG and WebP shrink-on-load feature, which can lead to a slight moiré pattern on some images.
  195. * @returns {Sharp}
  196. * @throws {Error} Invalid parameters
  197. */
  198. function resize (width, height, options) {
  199. if (is.defined(width)) {
  200. if (is.object(width) && !is.defined(options)) {
  201. options = width;
  202. } else if (is.integer(width) && width > 0) {
  203. this.options.width = width;
  204. } else {
  205. throw is.invalidParameterError('width', 'positive integer', width);
  206. }
  207. } else {
  208. this.options.width = -1;
  209. }
  210. if (is.defined(height)) {
  211. if (is.integer(height) && height > 0) {
  212. this.options.height = height;
  213. } else {
  214. throw is.invalidParameterError('height', 'positive integer', height);
  215. }
  216. } else {
  217. this.options.height = -1;
  218. }
  219. if (is.object(options)) {
  220. // Width
  221. if (is.defined(options.width)) {
  222. if (is.integer(options.width) && options.width > 0) {
  223. this.options.width = options.width;
  224. } else {
  225. throw is.invalidParameterError('width', 'positive integer', options.width);
  226. }
  227. }
  228. // Height
  229. if (is.defined(options.height)) {
  230. if (is.integer(options.height) && options.height > 0) {
  231. this.options.height = options.height;
  232. } else {
  233. throw is.invalidParameterError('height', 'positive integer', options.height);
  234. }
  235. }
  236. // Fit
  237. if (is.defined(options.fit)) {
  238. const canvas = mapFitToCanvas[options.fit];
  239. if (is.string(canvas)) {
  240. this.options.canvas = canvas;
  241. } else {
  242. throw is.invalidParameterError('fit', 'valid fit', options.fit);
  243. }
  244. }
  245. // Position
  246. if (is.defined(options.position)) {
  247. const pos = is.integer(options.position)
  248. ? options.position
  249. : strategy[options.position] || position[options.position] || gravity[options.position];
  250. if (is.integer(pos) && (is.inRange(pos, 0, 8) || is.inRange(pos, 16, 17))) {
  251. this.options.position = pos;
  252. } else {
  253. throw is.invalidParameterError('position', 'valid position/gravity/strategy', options.position);
  254. }
  255. }
  256. // Background
  257. this._setBackgroundColourOption('resizeBackground', options.background);
  258. // Kernel
  259. if (is.defined(options.kernel)) {
  260. if (is.string(kernel[options.kernel])) {
  261. this.options.kernel = kernel[options.kernel];
  262. } else {
  263. throw is.invalidParameterError('kernel', 'valid kernel name', options.kernel);
  264. }
  265. }
  266. // Without enlargement
  267. if (is.defined(options.withoutEnlargement)) {
  268. this._setBooleanOption('withoutEnlargement', options.withoutEnlargement);
  269. }
  270. // Shrink on load
  271. if (is.defined(options.fastShrinkOnLoad)) {
  272. this._setBooleanOption('fastShrinkOnLoad', options.fastShrinkOnLoad);
  273. }
  274. }
  275. return this;
  276. }
  277. /**
  278. * Extends/pads the edges of the image with the provided background colour.
  279. * This operation will always occur after resizing and extraction, if any.
  280. *
  281. * @example
  282. * // Resize to 140 pixels wide, then add 10 transparent pixels
  283. * // to the top, left and right edges and 20 to the bottom edge
  284. * sharp(input)
  285. * .resize(140)
  286. * .extend({
  287. * top: 10,
  288. * bottom: 20,
  289. * left: 10,
  290. * right: 10,
  291. * background: { r: 0, g: 0, b: 0, alpha: 0 }
  292. * })
  293. * ...
  294. *
  295. * @param {(number|Object)} extend - single pixel count to add to all edges or an Object with per-edge counts
  296. * @param {number} [extend.top]
  297. * @param {number} [extend.left]
  298. * @param {number} [extend.bottom]
  299. * @param {number} [extend.right]
  300. * @param {String|Object} [extend.background={r: 0, g: 0, b: 0, alpha: 1}] - background colour, parsed by the [color](https://www.npmjs.org/package/color) module, defaults to black without transparency.
  301. * @returns {Sharp}
  302. * @throws {Error} Invalid parameters
  303. */
  304. function extend (extend) {
  305. if (is.integer(extend) && extend > 0) {
  306. this.options.extendTop = extend;
  307. this.options.extendBottom = extend;
  308. this.options.extendLeft = extend;
  309. this.options.extendRight = extend;
  310. } else if (
  311. is.object(extend) &&
  312. is.integer(extend.top) && extend.top >= 0 &&
  313. is.integer(extend.bottom) && extend.bottom >= 0 &&
  314. is.integer(extend.left) && extend.left >= 0 &&
  315. is.integer(extend.right) && extend.right >= 0
  316. ) {
  317. this.options.extendTop = extend.top;
  318. this.options.extendBottom = extend.bottom;
  319. this.options.extendLeft = extend.left;
  320. this.options.extendRight = extend.right;
  321. this._setBackgroundColourOption('extendBackground', extend.background);
  322. } else {
  323. throw is.invalidParameterError('extend', 'integer or object', extend);
  324. }
  325. return this;
  326. }
  327. /**
  328. * Extract/crop a region of the image.
  329. *
  330. * - Use `extract` before `resize` for pre-resize extraction.
  331. * - Use `extract` after `resize` for post-resize extraction.
  332. * - Use `extract` before and after for both.
  333. *
  334. * @example
  335. * sharp(input)
  336. * .extract({ left: left, top: top, width: width, height: height })
  337. * .toFile(output, function(err) {
  338. * // Extract a region of the input image, saving in the same format.
  339. * });
  340. * @example
  341. * sharp(input)
  342. * .extract({ left: leftOffsetPre, top: topOffsetPre, width: widthPre, height: heightPre })
  343. * .resize(width, height)
  344. * .extract({ left: leftOffsetPost, top: topOffsetPost, width: widthPost, height: heightPost })
  345. * .toFile(output, function(err) {
  346. * // Extract a region, resize, then extract from the resized image
  347. * });
  348. *
  349. * @param {Object} options - describes the region to extract using integral pixel values
  350. * @param {number} options.left - zero-indexed offset from left edge
  351. * @param {number} options.top - zero-indexed offset from top edge
  352. * @param {number} options.width - width of region to extract
  353. * @param {number} options.height - height of region to extract
  354. * @returns {Sharp}
  355. * @throws {Error} Invalid parameters
  356. */
  357. function extract (options) {
  358. const suffix = this.options.width === -1 && this.options.height === -1 ? 'Pre' : 'Post';
  359. ['left', 'top', 'width', 'height'].forEach(function (name) {
  360. const value = options[name];
  361. if (is.integer(value) && value >= 0) {
  362. this.options[name + (name === 'left' || name === 'top' ? 'Offset' : '') + suffix] = value;
  363. } else {
  364. throw is.invalidParameterError(name, 'integer', value);
  365. }
  366. }, this);
  367. // Ensure existing rotation occurs before pre-resize extraction
  368. if (suffix === 'Pre' && isRotationExpected(this.options)) {
  369. this.options.rotateBeforePreExtract = true;
  370. }
  371. return this;
  372. }
  373. /**
  374. * Trim "boring" pixels from all edges that contain values similar to the top-left pixel.
  375. * Images consisting entirely of a single colour will calculate "boring" using the alpha channel, if any.
  376. *
  377. * The `info` response Object will contain `trimOffsetLeft` and `trimOffsetTop` properties.
  378. *
  379. * @param {number} [threshold=10] the allowed difference from the top-left pixel, a number greater than zero.
  380. * @returns {Sharp}
  381. * @throws {Error} Invalid parameters
  382. */
  383. function trim (threshold) {
  384. if (!is.defined(threshold)) {
  385. this.options.trimThreshold = 10;
  386. } else if (is.number(threshold) && threshold > 0) {
  387. this.options.trimThreshold = threshold;
  388. } else {
  389. throw is.invalidParameterError('threshold', 'number greater than zero', threshold);
  390. }
  391. if (this.options.trimThreshold && isRotationExpected(this.options)) {
  392. this.options.rotateBeforePreExtract = true;
  393. }
  394. return this;
  395. }
  396. /**
  397. * Decorate the Sharp prototype with resize-related functions.
  398. * @private
  399. */
  400. module.exports = function (Sharp) {
  401. Object.assign(Sharp.prototype, {
  402. resize,
  403. extend,
  404. extract,
  405. trim
  406. });
  407. // Class attributes
  408. Sharp.gravity = gravity;
  409. Sharp.strategy = strategy;
  410. Sharp.kernel = kernel;
  411. Sharp.fit = fit;
  412. Sharp.position = position;
  413. };