https://github.com/sonofmagic/miniprogram-qrcode-clip

clip miniprogram qrcode center circle area at client side to your custom image!
https://github.com/sonofmagic/miniprogram-qrcode-clip

Last synced: 9 days ago
JSON representation

clip miniprogram qrcode center circle area at client side to your custom image!

• Host: GitHub
• URL: https://github.com/sonofmagic/miniprogram-qrcode-clip
• Owner: sonofmagic
• License: mit
• Created: 2021-10-28T03:40:56.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-12-15T11:42:52.000Z (11 months ago)
• Last Synced: 2024-10-09T23:09:13.164Z (about 1 month ago)
• Language: Vue
• Size: 114 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# miniprogram-qrcode-clip

clip miniprogram qrcode center circle area at client side to your custom image!

[原理(Principle)](./Principle_CN.md)

## Demo

From:

![Form](./assets/icebreaker.raw.jpg)

To:

![To](./assets/custom.jpg)

## How to use it

### uni-app:

```ts

import QrcodeImage from 'miniprogram-qrcode-clip/libs/uni/Image.vue'

export default Vue.extend({

  ...

  components: { QrcodeImage }

  ...

}

  

await this.$refs.QrcodeImage?.preview()

await this.$refs.QrcodeImage?.show()

await this.$refs.QrcodeImage?.getImage()

```

> notice: current version not support default qrcode size (430px * 430px)

## Props

|attr|type|desc|

|---|---|---|

|loading|Boolean|loading status|

|src|string|background image url|

|avatarUrl|string|center circle image url|

|width|number|width(rpx)|

|height|number|height(rpx)|

|covered|Boolean|default: true(for .png transparent background)|

|coveredFillStyle|string|default: #ffffff coveredFillStyle|

## Methods

|name|return type|desc|

|---|---|---|

|init|void|init|

|show|Promise\|show qrcode|

|drawAvatar|Promise\|drawAvatar|

|drawBg|Promise\|drawBg|

|preview|Promise\|preview image|

|getImage|Promise\| get tempFilePath|