# vue-image-painter
English | [ç®ä½ä¸æ](./README.zh-CN.md)
## ð° Example
<img src="./demo/assets/demo.gif" width="320" style="margin-top: 20px;">
[Demo](https://komomoo.github.io/vue-image-painter/demo/dist/)
[Demo Source Code](https://github.com/komomoo/vue-image-painter/blob/master/demo/App.vue)
## ð QuickStart
1. Install
```bash
yarn add vue-image-painter # OR npm i -S vue-image-painter
```
2. Import
```js
// main.js
import ImagePainter from 'vue-image-painter'
Vue.use(ImagePainter)
```
3. Usage. Please refer to the [Demo Source Code](https://github.com/komomoo/vue-image-painter/blob/master/demo/App.vue)
```html
<ImagePainter :src="https://www.images.com/a.jpg"></ImagePainter>
```
## ð API
### Props
| Name | Description | Type | Default |
| --------- | --------------------------------------------------------------------------- | ------- | --------- |
| src | image URL. local images must be used `require('')` | String | undefined |
| alt | image alt | String | undefined |
| animation | animation effect. optional key: 'draw'ï¼'blur' | String | 'draw' |
| duration | animation duration. unit: ms | Number | 4000 |
| immediate | display images and animations immediately, don't wait for the image to load | Boolean | false |
### Events
| Name | Description | Parameters |
| --------- | ---------------- | ---------- |
| loadStart | image load start | null |
| loadEnd | image load end | null |
### Slots
| Name | Description |
| ------- | ------------------------------------------------------------- |
| default | The content ImagePainter displays, before the image is loaded |
---
ðð If it is helpful to youï¼please encourage me with a <b>âï¸<a href="#">Star</a></b> ~
## Inspiration
- [ImageDrawer.js](https://github.com/UstymUkhman/ImageDrawer.js)
## [Changelog](./CHANGELOG.md)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2018-present, komo
图片动态绘制组件 vue2.x
需积分: 5 25 浏览量
2022-07-14
17:09:47
上传
评论
收藏 2.89MB ZIP 举报
vue-image-painter.zip （29个子文件） 
vue-image-painter-master 
package.json 1KB README.zh-CN.md 2KB LICENSE 1KB dist vue-image-painter.esm.min.js 5KB vue-image-painter.esm.js 11KB vue-image-painter.common.min.js 5KB vue-image-painter.common.js 11KB vue-image-painter.js 12KB vue-image-painter.min.js 6KB src index.js 163B ImagePainter style animation.styl 1KB index.vue 2KB mixins index.js 207B .gitignore 86B CHANGELOG.md 975B demo App.vue 1KB assets 
Crested_Ibis.jpg 1.13MB
demo.gif 425KB
index.html 270B dist Crested_Ibis.61dac377.jpg 1.13MB index.html 288B main.41d0c573.js 71KB main.c967b235.css 3KB main.41d0c573.js.map 350KB main.js 195B README.md 2KB yarn.lock 301KB scripts release.sh 391B .editorconfig 147B
评论0