Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

README.md 4.1 KiB

3 lat temu
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. # StackBlur.js
  2. [![NPM Version](https://img.shields.io/npm/v/stackblur-canvas.svg)][pkg-npm]
  3. [![License](https://img.shields.io/npm/l/stackblur-canvas.svg)](https://github.com/flozz/StackBlur/blob/master/COPYING)
  4. StackBlur.js is a fast, almost Gaussian blur created by Mario Klingemann.
  5. * **More informations:** <http://incubator.quasimondo.com/processing/fast_blur_deluxe.php>
  6. * **Demo:** <http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html>
  7. Original source:
  8. * <http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js>
  9. ## Getting Started
  10. ### Standalone version
  11. To use the standalone version,
  12. download the [latest zip][dl-zip-master] from Github or clone the repository
  13. ```
  14. git clone git@github.com:flozz/StackBlur.git
  15. ```
  16. and include the `dist/stackblur.js` or `dist/stackblur.min.js` file in your HTML page:
  17. ```html
  18. <script src="StackBlur/dist/stackblur.js"></script>
  19. ```
  20. ### Node
  21. To use the [NPM package][pkg-npm],
  22. install the package:
  23. ```
  24. npm install --save stackblur-canvas
  25. ```
  26. and require it where needed
  27. ```js
  28. const StackBlur = require('stackblur-canvas');
  29. ```
  30. ### Browsers
  31. If you are only supporting modern browsers, you may use ES6 Modules directly:
  32. ```js
  33. import * as StackBlur from './node_modules/stackblur-canvas/dist/stackblur-es.min.js';
  34. ```
  35. Or, if you are using Rollup in your own project, use the [node-resolve](https://github.com/rollup/rollup-plugin-node-resolve) plugin,
  36. and import by just referencing the module:
  37. ```js
  38. import * as StackBlur from 'stackblur-canvas';
  39. ```
  40. ## API
  41. See also the docs in [docs/jsdoc](./docs/jsdoc/index.html).
  42. **Image as source:**
  43. ```js
  44. StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);
  45. ```
  46. * `sourceImage`: the `HTMLImageElement` or its `id`.
  47. * `targetCanvas`: the `HTMLCanvasElement` or its `id`.
  48. * `radius`: the radius of the blur.
  49. * `blurAlphaChannel`: Set it to `true` if you want to blur a RGBA image (optional, default = `false`)
  50. **RGBA Canvas as source:**
  51. ```js
  52. StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);
  53. ```
  54. * `targetCanvas`: the `HTMLCanvasElement`.
  55. * `top_x`: the horizontal coordinate of the top-left corner of the rectangle to blur.
  56. * `top_y`: the vertical coordinate of the top-left corner of the rectangle to blur.
  57. * `width`: the width of the rectangle to blur.
  58. * `height`: the height of the rectangle to blur.
  59. * `radius`: the radius of the blur.
  60. **RGB Canvas as source:**
  61. ```js
  62. StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);
  63. ```
  64. * `targetCanvas`: the `HTMLCanvasElement`.
  65. * `top_x`: the horizontal coordinate of the top-left corner of the rectangle to blur.
  66. * `top_y`: the vertical coordinate of the top-left corner of the rectangle to blur.
  67. * `width`: the width of the rectangle to blur.
  68. * `height`: the height of the rectangle to blur.
  69. * `radius`: the radius of the blur.
  70. **RGBA ImageData as source:**
  71. ```js
  72. StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);
  73. ```
  74. * `imageData`: the canvas' `ImageData`.
  75. * `top_x`: the horizontal coordinate of the top-left corner of the rectangle to blur.
  76. * `top_y`: the vertical coordinate of the top-left corner of the rectangle to blur.
  77. * `width`: the width of the rectangle to blur.
  78. * `height`: the height of the rectangle to blur.
  79. * `radius`: the radius of the blur.
  80. **RGB ImageData as source:**
  81. ```js
  82. StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);
  83. ```
  84. * `imageData`: the canvas' `ImageData`.
  85. * `top_x`: the horizontal coordinate of the top-left corner of the rectangle to blur.
  86. * `top_y`: the vertical coordinate of the top-left corner of the rectangle to blur.
  87. * `width`: the width of the rectangle to blur.
  88. * `height`: the height of the rectangle to blur.
  89. * `radius`: the radius of the blur.
  90. ## Hacking
  91. ### Building
  92. This library is built using [Rollup](https://rollupjs.org/guide/en).
  93. If you change something in the `src/` folder, use the following command
  94. to re-build the files in the `dist/` folder:
  95. `npm run rollup`
  96. [dl-zip-master]: https://github.com/flozz/StackBlur/archive/master.zip
  97. [pkg-npm]: https://www.npmjs.com/package/stackblur-canvas
  98. [grunt]: http://gruntjs.com/