vue2 实现解析二维码图片/二维码图片链接，区分企业微信二维码、个人微信二维码

于 2024-08-19 18:48:10 发布
阅读量565 收藏 10
点赞数 13
文章标签： 企业微信 微信 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yayaye717/article/details/141332470
版权

vue2 实现解析二维码图片/二维码图片链接，区分企业微信二维码、个人微信二维码

企微和个微的区别：
企微二维码解析后会含有 work.weixin

解析二维码图片

  1. 首先安装、导入 jsqr 包

    npm i jsqr

    import jsqr from 'jsqr';

  2. 页面添加上传文件按钮，以及显示解析图片后的结果显示区域

    <div class="image-box">
  <h4>解析图片：</h4>
  <el-input
    type="file"
    @change="handleFileChange"
    size="mini"
    style="width: 200px;"
  />
</div>
<canvas ref="canvas" style="display: none;"></canvas>
<div v-if="decodedText">
  <p>解析结果: {{ decodedText }}</p>
</div>

  3. 处理上传的图片文件函数

    // 处理文件上传事件
handleFileChange(event) {
// 获取上传的第一个文件
const file = event.target.files[0];

// 如果文件存在，则进行处理
if (file) {
    // 创建一个 FileReader 对象，用于读取文件内容
    const reader = new FileReader();

    // 设置 FileReader 的 onload 事件处理函数
    // 当 FileReader 读取完成时，会调用此函数
    reader.onload = () => {
    // 创建一个 Image 对象，用于显示图片
    const img = new Image();

    // 设置 Image 的 onload 事件处理函数
    // 当图片加载完成时，会调用此函数
    img.onload = () => {
        // 调用 decodeQRCode 函数，解析二维码
        this.decodeQRCode(img);
    };

    // 设置 Image 的 src 属性为 FileReader 读取的结果
    // 即将文件内容转换为 Data URL，作为图片的源
    img.src = reader.result;
    };

    // 调用 FileReader 的 readAsDataURL 方法，读取文件内容
    // 并将其转换为 Data URL
    reader.readAsDataURL(file);
}
}

  4. 解析二维码图片函数

    decodeQRCode(image) {
// 获取 canvas 元素，该元素应该在模板中定义并使用 ref 绑定
const canvas = this.$refs.canvas;
// 获取 canvas 的 2D 绘图上下文，用于在 canvas 上绘制图像
const context = canvas.getContext('2d');
// 设置 canvas 的宽度为图像的宽度
canvas.width = image.width;
// 设置 canvas 的高度为图像的高度
canvas.height = image.height;
// 将图像绘制到 canvas 上，从 (0, 0) 位置开始绘制
context.drawImage(image, 0, 0);

// 获取 canvas 上指定区域的图像数据，这里获取整个 canvas 的图像数据
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
// 使用 jsQR 库解码图像数据，获取二维码信息
const code = jsqr(imageData.data, canvas.width, canvas.height);

// 判断是否成功解码二维码
if (code) {
    // 如果解码成功，将解码后的数据存储到 decodedText 属性中
    this.decodedText = code.data;
} else {
    // 如果解码失败，设置 decodedText 属性为错误信息
    this.decodedText = '未能解析二维码';
}
},

解析图片链接

  1. 页面添加填写图片链接的输入框和提交按钮

    <div class="url-box">
  <h4>解析图片链接：</h4>
  <el-input
    v-model="imageUrl"
    placeholder="输入图片链接"
    size="mini"
    style="width: 200px;margin-right: 20px;"
  />
  <el-button type="success" @click="convertUrlToFile" size="mini"
    >转换为文件并处理</el-button
  >
</div>

  2. 将图片链接转换为图片的函数

    async convertUrlToFile() {
    // 如果 imageUrl 为空，则提示用户输入图片链接
    if (!this.imageUrl) {
        this.decodedText = '请输入图片链接'; // 设置提示信息
        return; // 结束函数执行
    }

    try {
        // 使用 axios 发起 GET 请求以获取图片数据
        const response = await axios({
        url: this.imageUrl, // 请求的 URL
        method: 'GET', // 请求方法为 GET
        responseType: 'blob', // 指定响应数据类型为 Blob (二进制大对象)
        });

        // 将获取到的 Blob 数据转换为 File 对象
        const file = new File([response.data], 'image.jpg', { type: 'image/jpeg' });

        // 模拟一个 input 的 change 事件，将生成的 File 对象传递给 handleFileChange 方法
        this.handleFileChange({ target: { files: [file] } });
    } catch (error) {
        // 处理请求失败或其他错误，并显示错误信息
        this.decodedText = '图片处理失败: ' + error.message;
    }
    },

完整代码：

<template>
  <div class="container">
    <div class="url-box">
      <h4>解析图片链接：</h4>
      <el-input
        v-model="imageUrl"
        placeholder="输入图片链接"
        size="mini"
        style="width: 200px;margin-right: 20px;"
      />
      <el-button type="success" @click="convertUrlToFile" size="mini"
        >转换为文件并处理</el-button
      >
    </div>
    <div class="image-box">
      <h4>解析图片：</h4>
      <el-input
        type="file"
        @change="handleFileChange"
        size="mini"
        style="width: 200px;"
      />
    </div>
    <canvas ref="canvas" style="display: none;"></canvas>
    <div v-if="decodedText">
      <p>解析结果: {{ decodedText }}</p>
    </div>
  </div>
</template>

<script>
import jsqr from "jsqr";
import axios from "axios";

export default {
  data() {
    return {
      decodedText: null,
      imageUrl: "", // 图片链接
      downloadStatus: "", // 下载状态
    };
  },
  methods: {
    async convertUrlToFile() {
      // 如果 imageUrl 为空，则提示用户输入图片链接
      if (!this.imageUrl) {
        this.decodedText = "请输入图片链接"; // 设置提示信息
        return; // 结束函数执行
      }

      try {
        // 使用 axios 发起 GET 请求以获取图片数据
        const response = await axios({
          url: this.imageUrl, // 请求的 URL
          method: "GET", // 请求方法为 GET
          responseType: "blob", // 指定响应数据类型为 Blob (二进制大对象)
        });

        // 将获取到的 Blob 数据转换为 File 对象
        const file = new File([response.data], "image.jpg", {
          type: "image/jpeg",
        });

        // 模拟一个 input 的 change 事件，将生成的 File 对象传递给 handleFileChange 方法
        this.handleFileChange({ target: { files: [file] } });
      } catch (error) {
        // 处理请求失败或其他错误，并显示错误信息
        this.decodedText = "图片处理失败: " + error.message;
      }
    },
    // 处理文件上传事件
    handleFileChange(event) {
      // 获取上传的第一个文件
      const file = event.target.files[0];

      // 如果文件存在，则进行处理
      if (file) {
        // 创建一个 FileReader 对象，用于读取文件内容
        const reader = new FileReader();

        // 设置 FileReader 的 onload 事件处理函数
        // 当 FileReader 读取完成时，会调用此函数
        reader.onload = () => {
          // 创建一个 Image 对象，用于显示图片
          const img = new Image();

          // 设置 Image 的 onload 事件处理函数
          // 当图片加载完成时，会调用此函数
          img.onload = () => {
            // 调用 decodeQRCode 函数，解析二维码
            this.decodeQRCode(img);
          };

          // 设置 Image 的 src 属性为 FileReader 读取的结果
          // 即将文件内容转换为 Data URL，作为图片的源
          img.src = reader.result;
        };

        // 调用 FileReader 的 readAsDataURL 方法，读取文件内容
        // 并将其转换为 Data URL
        reader.readAsDataURL(file);
      }
    },
    decodeQRCode(image) {
      // 获取 canvas 元素，该元素应该在模板中定义并使用 ref 绑定
      const canvas = this.$refs.canvas;
      // 获取 canvas 的 2D 绘图上下文，用于在 canvas 上绘制图像
      const context = canvas.getContext("2d");
      // 设置 canvas 的宽度为图像的宽度
      canvas.width = image.width;
      // 设置 canvas 的高度为图像的高度
      canvas.height = image.height;
      // 将图像绘制到 canvas 上，从 (0, 0) 位置开始绘制
      context.drawImage(image, 0, 0);

      // 获取 canvas 上指定区域的图像数据，这里获取整个 canvas 的图像数据
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      // 使用 jsQR 库解码图像数据，获取二维码信息
      const code = jsqr(imageData.data, canvas.width, canvas.height);

      // 判断是否成功解码二维码
      if (code) {
        // 如果解码成功，将解码后的数据存储到 decodedText 属性中
        this.decodedText = code.data;
      } else {
        // 如果解码失败，设置 decodedText 属性为错误信息
        this.decodedText = "未能解析二维码";
      }
    },
  },
};
</script>
<style>
.container {
  width: 700px;
  height: 300px;
  margin: 0 auto;
  border: 1px dashed #ddd;
  border-radius: 10px;
}

.url-box {
  margin-left: 200px;
  margin-top: 50px;
  text-align: left;
}

.image-box {
  text-align: left;
  margin-left: 200px;
}
</style>
yayaye717
关注
  • 13
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE实现PC页面微信二维码支付
m0_58889179的博客
01-23 952
1.生成订单获取订单号，支付金额（调用后端订单生成接口）3.使用QRCode将codeurl转化为二维码。2.调用支付接口获取codeUrl。3-2在mine.js引入插件。3-3在页面使用QRCode。3-1安装QRCode插件。
Vue使用二维码生成微信支付
weixin_51619945的博客
07-06 1059
二维码生成(qrcode)
vue网页分享生成二维码微信扫一扫进行分享
yqlnihao的博客
11-18 1334
//安装生成二维码插件 npm intsall qrcodejs2 //引入 import QRCode from 'qrcodejs2' <img src="../../assets/img/weix.png" @click="shares" alt=""/> <el-dialog title="二维码" :visible.sync="centerDialogVisible" width="30%" center>
vue——微信二维码显示vue-qr/qrcodejs2
Juliet_xmj的博客
10-08 777
微信二维码之vue-qr/qrcodejs2 区别 vue-qr 弊端：当后端微信返回二维码，不兼容IE浏览器 npm install vue-qr --save main.js import vueQr from 'vue-qr' Vue.use(vueQr) <vue-qr :text="qrCode" :margin="0" colorLight="#fff" :logoSrc="require('./../../assets/wpay.svg')" :logoScale="0.2" :si
Vue中实现将页面生成微信二维码
~
09-08 1646
1.这里用到的插件是：qr-code-with-logo，所以第一步先安装此插件 npm install --save qr-code-with-logo 2.写个div用来存放二维码图片 <li> <i class="wx"></i> 微信扫一扫 <div id="qrcodeCanvas"></div> </li> 3.生成二维码的方法：（在moun
前端开发实践：vue中用qrcode库将超链接生成二维码图片
黑夜开发者的博客
10-24 3850
本篇博文介绍了如何使用qrcode库来在Vue项目中生成二维码。首先，我们安装了qrcode库，并将其添加到我们的项目依赖中。然后，我们通过一个实际示例展示了如何创建一个能够生成二维码的Vue组件。通过输入用户的联系信息，我们可以生成一个可以扫描的二维码，其他人可以通过扫描该二维码来获取用户的联系信息。生成二维码是一个非常有用且常见的需求，它可以简化信息的传递和分享过程。在Vue项目中，使用qrcode库可以轻松地生成二维码，并且可以根据具体需求进行定制。希望本篇博文能够帮助你更好地理解如何在Vue。
uni-app Vue3 实现将微信支付的url转成二维码扫码支付
HaushoLin的博客
04-30 1551
带你实现点击创建订单成功之后，将后端返回的微信支付url转化为二维码的功能。
vue微信支付业务生成二维码qrcode
Vevean2545116309的博客
01-13 856
二维码生成使用Npm模块：qrcode 先用npm安装：npm i qrcode 1.先引入生成二维码 import QRCode from "qrcode"; //引入生成二维码 2.可以获取到二维码的url QRCode.toDataURL(this.payInfo.codeUrl);//需要传递参数
Vue2实现长按图片识别二维码
m0_54089303的博客
08-22 2741
Vue2实现长按图片识别二维码
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
10-15
几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的，然后就很顺利的遇到了在安卓端扫码的时候，顺利的一塌糊涂，然后到了苹果端的时候，就只能出现一个保存图片，然后就写一下记录一下这问题的解决...
微信实现网页扫描二维码登录
12-11
微信实现网页扫描二维码登录，分三步走，第一步配置相关信息，第二步 代码编程，第三步 测试，主要是配置需要关注的点有几个，可以详细阅读我的博客，配置正确，一切都ok
Vue实现手机扫描二维码预览页面效果
12-28
本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码，供大家参考，具体内容如下 背景：vue-cli3 + ant-design-vue 搭建的后台管理系统 需求：实现扫描二维码即可在手机预览H5页面功能 使用插件：qrcode ...
vue中实现动态生成二维码的方法
10-15
在Vue.js框架中，动态生成二维码是一项常见的需求，特别是在实现分享、追踪等功能时。本文将详细介绍如何在Vue项目中利用`qrcodejs2`库来创建动态二维码。 首先，我们需要安装`qrcodejs2`模块。在命令行中运行以下...
ShareSDK 企业微信
最新发布
apkkkk的博客
08-16 840
本篇文档主要讲解如何使用企业微信并进行分享和授权。
微信支付流程
qq_30193097的博客
08-14 1871
订单金额、收货地址、订单中包含的商品信息。
ios微信分享，微信登录，添加ios平台通用连接Universal Links
L_15737525552的博客
08-14 441
连接开头要是https的，因为需要把连接添加到微信开放平台上，微信开放平台邀请连接要https开头的。生成获取的，XXX为App ID Prefix，******为Bundle ID。完成后需要等开放平台审核通过后才能生效。文件中的appID是由。验证浏览器可以访问，
JAVA-WEB资源配置
caryeko的专栏
08-15 219
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 455
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
vue2 生成微信支付二维码
08-27
你可以使用第三方库 `vue-qriously` 来生成微信支付二维码。首先，安装这个库： ``` npm install vue-qriously ``` 然后，在你的 Vue 组件中引入并使用 `vue-qriously`： ```vue <template> <div> <qriously :value="qrCodeValue" :size="150"></qriously> </div> </template> <script> import Qriously from 'vue-qriously' export default { components: { Qriously }, data() { return { qrCodeValue: '' } }, mounted() { // 调用后端接口获取微信支付链接 // 这里只是示例，你需要替换成你的实际代码 this.getWeChatPayLink() }, methods: { async getWeChatPayLink() { // 发起 API 请求获取微信支付链接 const response = await fetch('/api/wechat/pay') const { payLink } = await response.json() // 将支付链接赋值给 qrCodeValue this.qrCodeValue = payLink } } } </script> ``` 上面的代码中，我们通过 `fetch` 函数发起了一个异步请求来获取微信支付链接，然后将这个链接赋值给 `qrCodeValue`。 `vue-qriously` 的 `value` 属性接受一个字符串，会根据这个字符串生成对应的二维码。 请注意，以上代码只是一个示例，你需要根据你的实际需求进行修改和完善。另外，为了安全起见，请确保在真实的生产环境中使用安全的方式获取微信支付链接。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值