vue-pattern-placeholder
v1.0.34
Published
Adds canvas patterns as placeholder images
Downloads
18
Maintainers
Readme
Vue-pattern-placeholder
This plugin provides a placeholder component for Vue.js. It uses canvas to render patterns from input string like URL.
Table of contents
Demo
Sample images
Recent updates
- 2019-05-04 Import format changed, refer to usage section.
Installation
To install this plugin, open terminal in your Vue project directory and type:
npm i --save-dev vue-pattern-placeholder
This command will install the plugin in your project node_modules
dir and
add it as a project development dependency in project's package.json
file.
If you need this plugin as a generic dependency, type this command instead:
npm i --save-dev vue-pattern-placeholder
Usage
To import a component, write:
import patternPlaceholder from 'vue-pattern-placeholder'
Add it to the components
property
components: {
patternPlaceholder
},
Now you can use it in your template:
<patternPlaceholder
:width="150" :height="150"
:input="''+item_data.media_id"
label="150x150"
label_style="900 30px Arial" label_color="#000"
:hue_range="[70, 170]"
:lightness_range="[0, 100]"
/>
I recommend to start playing with hue_range
and lightness_range
properties to reach the best look.
API
For now, none of the parameters are required.
| Option | Data-type(s) | Description | Default |
|-----------------|--------------|-----------------------------------------------------------------------------|---------------------|
| width | Number | width of an image | 250 |
| height | Number | height of an image | 250 |
| input | String | this text will be converted to a pattern | Hi there! :-) |
| label | String | text label to show | No label |
| label_style | String | canvas font style. Example: 900 30px Arial
| 20px Helvetica bold |
| label_color | String | color of a label. Example: #777
| #777 |
| metric | String | metric, used to create a pattern. Examples: Euclidean, Manhattan, Minkovski | Manhattan |
| debug | Boolean | allows to show center points for a Voronoi pattern | false |
| hue_range | Array | sets a color range in degrees. Example: [0, 359]
| [0, 359] |
| lightness_range | Array | lightness range for pattern pieces in percents. Example: [0, 100]
| [0, 100] |
Warning
Please be aware that this project is still in a testing stage. Use at your own risk. Ideas and bug reports are welcome.
Inspiration
I thought about converting text to an image and I remembered Voronoi patterns: these are easy to implement and look very nice.
Then I had an idea:
- take a string, process it using a SHA-256 hash function
- extract hash bytes
- use pairs of bytes, converting each to a float value between 0 and 1 to place X and Y points
- count pattern segments, use numbers to set each one's hue in HSV color palette
- calculate pattern areas
- use areas to determine lightness of a pattern segment in HSV
TODO
- [x] Overlay text
- [x] Fix wrong color representation in overlay text
- [x] Autoreload fix (probably needs a destructor)
- [x] Fix empty canvas on width / height change
- [x] Fixed beforeDestroy bug
- [x] Added demo
- [ ] Consider integrating label style and color into one parameter
- [ ] Label style settings in key-value format
- [ ] Extend hue setting to a list of several possible hues
Acknowledgements
Thanks to AnatolV from RosettaCode for a nice Voronoi diagram implementation.
Thanks to emn178 for js-sha256 library. It is easy to use and helps a lot.