canvas绘制带二维码的海报

夏天咯

已于 2024-05-16 09:23:05 修改

阅读量821

点赞数

分类专栏： vue 文章标签： javascript 前端 canvas 二维码海报

于 2023-02-22 16:40:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37628661/article/details/129165315

版权

最近有个要做带二维码的海报的需求，生成二维码用的是qrcode，把背景图和二维码合在一起当然就要用到神奇的canvas了~

<!-- 海报容器 -->
<div id="canbox">
    <canvas id="myCanvas" width="" height="" style="display:none"></canvas>
    <img :src="imgUrl" id="canimg">
</div>
<!-- 二维码 -->
<div style="z-index:-100;opacity:0">
    <div id="qr" ref="qrcode" class="erweimaCss"></div>
</div>

import QRCode from 'qrcodejs2'
export default {
    data(){
        imgUrl: '',//生成的海报的url
    },
    mounted(){
        let qrCode = new QRCode('qr', {
            text: '123456', //# 二维码内容
            width: 160,//宽度
            height: 160,//高度
            render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）
            colorDark: '#333