vue插件qrcode实现手机端二维码保存功能

1.安装

npm install qrcode --save

2.页面引入并使用

利用<img src="">标签，实现二维码图片功能。然后长按保存即可。

<template>
    <div class="qrcode">
        <canvas id="canvas" style="display:none"></canvas>      
        <img :src="imgUrl"/>
        <p>长按保存二维码图片</p> 
    </div>
</template>
import QRCode from 'qrcode'
export default {
    data() {
        return {
            codes: '',
            imgUrl:''
        }
    },
    components: {
        QRCode: QRCode
    },
    methods: {
        useqrcode() {//生成二维码
            let canvas = document.getElementById('canvas')
            let url="http://www.baidu.com"
            QRCode.toCanvas(canvas, url, function(error) {
                if (error) { console.error(error) } else { console.log('success!'); }
            })
            this.saveImg()//保存图片
        },
        //保存图片
        saveImg(){
            let myCanvas = document.getElementsByTagName('canvas');
            this.imgUrl=myCanvas[0].toDataURL('image/png')                          
        },
    },
    mounted() {
        this.useqrcode(); //生成二维码        
    }
}
</script>