https://github.com/komomoo/vue-image-painter

🙋‍♀️ Image magic animation drawing effect component for Vue 2.x | 图像动态绘制效果
https://github.com/komomoo/vue-image-painter

image image-drawer image-painter img-draw vue

Last synced: 2 months ago
JSON representation

🙋‍♀️ Image magic animation drawing effect component for Vue 2.x | 图像动态绘制效果

• Host: GitHub
• URL: https://github.com/komomoo/vue-image-painter
• Owner: komomoo
• License: mit
• Created: 2019-07-05T03:19:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-11-19T08:55:01.000Z (about 3 years ago)
• Last Synced: 2024-05-29T11:20:30.241Z (8 months ago)
• Topics: image, image-drawer, image-painter, img-draw, vue
• Language: Vue
• Homepage: https://wannaxiao.github.io/vue-image-painter/demo/dist/
• Size: 1.75 MB
• Stars: 28
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-image-painter

English | [简体中文](./README.zh-CN.md)

## 🌰 Example



[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

```

## 🔌 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 ⭐️Star ~

## Inspiration

- [ImageDrawer.js](https://github.com/UstymUkhman/ImageDrawer.js)

## [Changelog](./CHANGELOG.md)

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2018-present, komo