图片地址生成二维码（通过前端实现）

文章目录

• • 概要
  • 安装插件
  • 代码实例

概要

     要将图片地址生成二维码，你可以使用 QrCode 库（假设你已经在项目中引入了该库）。以下是一个简单的示例代码，演示了如何使用 QrCode 库将图片地址转换为二维码并显示在页面上

安装插件

  先下载生二维码的插件 通过 $ npm i qrcode 命令

代码实列

写一个弹出层

dom为一个canvas的dom对象， info为转化二维码的信息

我们尝试将canvas标签放到dialog的弹层中

<template><el-dialog title="二维码" :visible.sync="showCodeDialog" @opened="showQrCode" @close="imgUrl=''"><el-row type="flex" justify="center"><canvas ref="myCanvas" /></el-row></el-dialog>
</template><script>
import QrCode from 'qrcode';export default {data() {return {showCodeDialog: false,imgUrl: '', // 图片地址};},methods: {showQrCode(url) {// url存在的情况下才弹出层if (url) {this.showCodeDialog = true;// 确保页面已经渲染完毕this.$nextTick(() => {// 将地址转化成二维码QrCode.toCanvas(this.$refs.myCanvas, url, (error) => {if (error) {console.error(error);}});});} else {this.$message.warning('图片地址为空');}},},
};
</script>