微信小程序点击按钮弹窗生成二维码图片+长按识别

框架：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长按识别