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

Komo

Last update: Sep 19, 2022

Overview

vue-image-painter

English | 简体中文

🌰 Example

Demo

Demo Source Code

🚀 QuickStart

Install

yarn add vue-image-painter # OR npm i -S vue-image-painter

Import

// main.js
import ImagePainter from 'vue-image-painter'
Vue.use(ImagePainter)

Usage. Please refer to the Demo Source Code

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

Inspiration

ImageDrawer.js

Changelog

License

MIT

A Vue component for magnifying an image within its original container.

A Vue component for magnifying an image within its original container. The zoom behavior is triggered on click and the image can be moved by dragging on touch devices and by either dragging or hover panning on non-touch devices. The component supports responsive images and optional fullscreen zoom on mobile.

119 Dec 24, 2022

Lightweight responsive image zoom component for Vue.js 2

Vue Image Zoomer Lightweight responsive image zoom component for Vue.js 2, that also works on touch devices. Perfect for zooming on product images on

40 Dec 24, 2022

Vue plugin with simple component for choosing image

vue-image-chooser This is vue plugin with simple component for choosing image. It supports easy implementation for image upload to the backend. Instal

5 May 7, 2021

Lightweight and simple image gallery component for Vue.js

vue-image-box Description Lightweight and simple-ish image gallery component for Vue.js. Images can also be cycled through using the left & right arro

2 Oct 3, 2021

Lingallery is a simple image gallery component for Vue.js

Lingallery is a simple image gallery component for Vue.js. It displays a large image with thumbnails below as you can see in the demo. You can define several settings to adapt the gallery to your needs.

0 Oct 22, 2020

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js Live demo Examples directive component thumbnail

0 Dec 3, 2020

A lightweight image, video and iframe lightbox gallery component for Vue

A lightweight image, video and iframe lightbox gallery component for Vue. Supports slide, zoom, rotation, autoplay, captions and so on.

3 Aug 30, 2022

Cocomaterial Image component for Vue.js

Cocomaterial Image component for Vue.js. Try the demo! Installation yarn add vue-cocomaterial-image Usage import CocomaterialImage from 'vue-cocomater

8 May 15, 2021

🔍 Vue image zoom component

vue-magnifier This is a Vue 3 adaptation of react-magnifier, which is the original version. Someone else made a Svelte version, called svelte-magnifie

3 Aug 9, 2022

Comments

chore(deps): bump lodash.template from 4.4.0 to 4.5.0
Bumps lodash.template from 4.4.0 to 4.5.0.

Commits

ab73503 Bump to v4.5.0.

a4f7d4c Rebuild lodash and docs.

cca5ac6 Fix npm-test by removing the call to test-docs.

9f7f9fc Adjust heading order. [ci skip]

6e2fb92 Remove unused baseArity.

4f702e2 Specify utf8 encoding.

b188f90 Add fp tests for iteratee shorthands.

7b93dc9 Ensure clone methods clone expando properties of boolean, number, & string ob...

664d66a Make string tests more consistent.

d9dc0e6 Add _.invertBy tests.

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0