uniapp 生成二维码、canvas保存为图片、图片下载

问题： 绘制不显示二维码

canvasToTempFilePath:fail fail canvas is empty

解决：

import UQRCode from 'uqrcodejs';
// #ifdef H5
import { saveAs } from 'file-saver';  // ios只能下载到浏览器中，无法保存到相册
// #endif

<canvas :id="canvasId" :canvas-id="canvasId" :style="{
        width: size + 'px',
        height: size + 'px',
        padding:'10rpx', // 留边距
        position:'relative',
        left:'50%',
        transform:'translateX(-50%)'
    }" v-if="!imgUrl"></canvas>
<image style="width:200px" :src="imgUrl"  mode="widthFix" v-else ></image>

<button size="mini" type="primary" @click="saveQrcode">保存二维码</button>

mounted() {
    this.initCanvas();
},
methods: {
    initCanvas() {
        // 避免绘制未完成不显示二维码
        setTimeout(() => {
            var qr = new UQRCode();
            qr.data = this.url;
            qr.size = 200;
            qr.make();
            var canvasContext = uni.createCanvasContext(this.canvasId, this);
            qr.canvasContext = canvasContext;
            qr.drawCanvas();
            // 直接渲染图片展示可支持长按保存
            this.initImg();
        }, 1);
    },
    initImg() {
        // 解决 canvasToTempFilePath:fail fail canvas is empty 报错
        const ctx = uni.createCanvasContext(this.canvasId, this);
        uni.canvasToTempFilePath(
            {
                x: -10,
                y: -10, // 留边距
                canvasId: this.canvasId,
                success: res => {
                    uni.downloadFile({
                        url: res.tempFilePath,
                        success: data => {
                            if (data.statusCode === 200) {
                                this.imgUrl = data.tempFilePath;
                            }
                        }
                    });
                }
            },
            this
        );
    },
    saveQrcode(type) {
        // 保存图片
        saveAs(this.imgUrl, this.name);
    }
}

<style lang="scss">
    // 留边距
    ::v-deep uni-canvas>.uni-canvas-canvas {
        position: absolute;
        top: 20rpx;
        left: 20rpx;
        background-color: #fff;
    }
</style>

二维码需要留边距，避免扫码不出，效果图如下：

参考链接：canvasToTempFilePath:uniapp.dcloud.net.cn/api/canvas/…

UQRCode:www.npmjs.com/package/uqr…

canvas is empty:blog.csdn.net/weixin\\_42…

saveAs:www.npmjs.com/package/fil…

// qrcodejs2生成二维码且转图片

<template>
    <view>
        <image class="img" :src="qrcode" v-if="qrcode"></image>
        <div class="qrcode" ref="qrCodeUrl" v-else></div>
    </view>
</template>

import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'

export default {
    data() {
        return {
            qrcode: ''
        }
    },
    mounted() {
        this.creatQrCode()
    },
    methods: {
        creatQrCode() {
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: window.location.href,
                colorDark: '#000000',
                colorLight: '#ffffff',
                width: 80,
                height: 80,
                correctLevel: QRCode.CorrectLevel.H
            })
            this.toImage()
        },
        toImage() {
            html2canvas(this.$refs.qrCodeUrl).then(canvas => {
                this.qrcode = canvas.toDataURL('image/png')
            })
        },
        download() {
            var a = document.createElement('a') // 创建一个a节点插入的document
            var event = new MouseEvent('click') // 模拟鼠标click点击事件
            a.download = '图片名字' // 设置a节点的download属性值
            a.href = this.qrcode // 将图片的src赋值给a节点的href
            a.dispatchEvent(event) // 触发鼠标点击事件
        }
    }
}

.img {
    width: 150rpx;
    height: 150rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 4rpx solid #887A69;
    margin-right: 30rpx;
}

.qrcode {
    width: 158rpx;
    height: 158rpx;
    margin-right: 30rpx;
}

效果图如下：

来源链接：blog.csdn.net/qq_42044542…