框架:uni-app
库:Painter
ui框架:uView 1.X
<u-modal class="show-close" v-model="showClose" :title="title" :confirm-style="confirmStyle" confirm-text="确认" @confirm="confirmClose"><view class="slot-content"><view class="tit">温馨提示</view><view class="con">请长按识别二维码跳转公众号或长按保存图片并通过微信扫码领取</view><view class="img"><u-image width="280rpx" height="280rpx" :src="receiveSrc" :fade="true" duration="450" show-menu-by-longpress><u-loading slot="error"></u-loading><u-loading slot="loading"></u-loading></u-image></view></view></u-modal><lPainter customStyle='position: absolute; left: -9999rpx;' :palette="base" @imgOK="onImgOK" />
u-modal 为uView弹窗,弹窗内容显示生成的二维码图片
引入Painter组件(需事先下载库到components)
import lPainter from '@/packageA/components/ape-painter/painter.vue';components: {lPainter},
draw(obj) {this.base = {width: '280rpx',height: '280rpx',background: '#fff',//画布背景色views: [{type: 'qrcode',content: obj.body,css: {width: "280rpx",height: "280rpx",top: "0px",left: "0px",rotate: "0",borderRadius: ""}}]}},
获取数据后,调用this.draw()方法,绘制canvas,这里使用的painter内置的生成二维码qrcode,
onImgOK(e){this.receiveSrc = e.detail.path},
绘制成功后,onImgOk回调中获取生成图片地址
u-image组件中绑定receiveSrc,并开启show-menu-by-longpress长按识别