菜单 搜索
首页 前端知识 前端二维码图片解析图片识别/网络图片解析成链接/图片网络链接转本地链接(Js/Vue/Jquery)

前端二维码图片解析图片识别/网络图片解析成链接/图片网络链接转本地链接(Js/Vue/Jquery)

2024-03-21 15:03:25 前端知识 前端哥 603 510 我要收藏

目录

1、远程图片链接本地化

        1.创建图片

        2. 绘画图片

        3.创建文件流

        4.上传到本地（此步骤根据实际需求选择）

2、解析二维码（网络图片示例）

        1.准备工作

                安装canvas ：npm install canvas

                安装jsqr：npm install jsqr

                安装jquery：npm install jquery

        2.识别二维码（jquery--本地文件上传)

        3.识别二维码（vue网络二维码图片识别）

注：需要用到canvas/jsqr/jquery！

1、远程图片链接本地化

        页面：

<!-- 识别二维码用的 canvas-->
<canvas class="canvas" ref="canvas" style="display: none"></canvas>
复制

        1.创建图片

 get2: function (src) {
  let _this = this;
  return new Promise((resolve, reject) => {
    let image = new Image(), resultBlob = '';
    image.setAttribute('crossOrigin', 'anonymous');
    image.src = src;
    image.onload = () => {
      let random = Math.random();
      // 调用方法获取blob格式，方法写在下边
      resultBlob = _this.get3(image,random+".jpg");
      resolve(resultBlob)
    };
    image.onerror = () => {
      reject()
    }
  })
},
复制

        2. 绘画图片

get3(image, fileName) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  let initSize = image.src.length
  let { width } = image, { height } = image;
  //等比缩放第二种 宽或高超过1280，等比缩放
  let rate = 1920 / width > 1;
  let tate = 1920 / height > 1;
  if(!rate){
    let product = 1920 / width;
    width =  Math.floor((width * product)*100)/100;
    height =  Math.floor((height * product)*100)/100;
  }else if(!tate){
    let product = 1920 / height;
    width =  Math.floor((width * product)*100)/100;
    height =  Math.floor((height * product)*100)/100;
  }
  canvas.width = width
  canvas.height = height
  ctx.fillStyle = 'rgba(255, 255, 255, 0)';//透明色
  ctx.fillRect(0, 0, width, height)
  ctx.drawImage(image, 0, 0, width, height)
 
  // 进行最小压缩0.1
  let compressData = canvas.toDataURL('image/jpg', 0.8)
 
  // 压缩后调用方法进行base64转Blob，方法写在下边
  let newFile = this.get4(compressData, fileName);
  return newFile
},
复制

        3.创建文件流

get4(dataurl, filename) {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  //转换成file对象
  return new File([u8arr], filename, { type: mime });
},
复制

        4.上传到本地（此步骤根据实际需求选择）

async get1(src){//当需要循环时获取结果使用异步
  let _this=this
  let res2 = await _this.get2(src);
  let formData = new FormData();
  let random = Math.random();
        
  formData.append("random", random);
  formData.append("files", res2);
   //后端接口
  let res = await _this.$http.postFile("/uploadImgForPc", formData);
},
复制

2、解析二维码（网络图片示例）

        1.准备工作

        注：根据需要安装，如有本地文件也可引用！

                安装canvas ：npm install canvas

                安装报错：

> canvas@2.11.2 install /Users/.../WORK/work/.../node_modules/canvas > node-pre-gyp install --fallback-to-build --update-binary
复制

                解决报错：

npm install canvas@2.11.2  --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas
复制
                安装jsqr：npm install jsqr
                安装jquery：npm install jquery

        2.识别二维码（jquery--本地文件上传)

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片二维码识别</title>
  <script src="./jquery.min.js"></script>
  <script src="./jsQR.js"></script>
</head>
<body>
  <span lan_id="bc">选择图片</span> <input type="file"  id="pictureChange"/>
     <div>
         <h2>识别结果：</h2>
         <ul id="result"></ul>
     </div>
  </body>
  <script type="text/javascript">
        $("body").append('<canvas id="qrcanvas" style="display:none;"></canvas>')
        $("#pictureChange").change(function (e) {
            var file = e.target.files[0];
            if(window.FileReader) {
                var fr = new FileReader();
                fr.readAsDataURL(file);
                fr.onloadend = function(e) {
                    var base64Data = e.target.result;
                    base64ToqR(base64Data)
                }
            }
        })
        function base64ToqR(data) {
            var c = document.getElementById("qrcanvas");
            var ctx = c.getContext("2d");
     
            var img = new Image();
            img.src = data;
            img.onload = function() {
                $("#qrcanvas").attr("width",img.width)
                $("#qrcanvas").attr("height",img.height)
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var imageData = ctx.getImageData(0, 0, img.width, img.height);
                const code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                });
                if(code){
                    showCode(code.data)
                }else{
                    alert("识别错误")
                }
            };
        }
        function showCode(code){
            $("#result").append("<li>"+code+"</li>")
        }
    </script>
</html>
复制

        3.识别二维码（vue网络二维码图片识别）

<!-- 识别二维码用的 canvas-->
<canvas class="canvas" ref="canvas" style="display: none"></canvas>
//e 为网络图片路径
async identifyImg(e) {
      let _this = this;
      return new Promise(async (resolve, reject) => {
        function get2(src) {
          return new Promise((res, rej) => {
            let image = new Image(),
              resultBlob = "";
            image.setAttribute("crossOrigin", "anonymous");
            image.src = src;
            image.onload = () => {
              let random = Math.random();
              resultBlob = get3(image, random + ".jpg");
              res(resultBlob);
            };
            image.onerror = () => {
              rej();
            };
          });
        }
 
        function get3(image, fileName) {
          let canvas = _this.$refs.canvas;
          let ctx = canvas.getContext("2d");
          let { width } = image,
            { height } = image;
          //等比缩放第二种 宽或高超过1280，等比缩放
          let rate = 1920 / width > 1;
          let tate = 1920 / height > 1;
          if (!rate) {
            let product = 1920 / width;
            width = Math.floor(width * product * 100) / 100;
            height = Math.floor(height * product * 100) / 100;
          } else if (!tate) {
            let product = 1920 / height;
            width = Math.floor(width * product * 100) / 100;
            height = Math.floor(height * product * 100) / 100;
          }
          canvas.width = width;
          canvas.height = height;
          ctx.fillStyle = "rgba(255, 255, 255, 0)"; //透明色
          ctx.fillRect(0, 0, width, height);
          ctx.drawImage(image, 0, 0, width, height);
 
          // 进行最小压缩0.1
          let compressData = canvas.toDataURL("image/jpg", 0.8);
 
          // 压缩后调用方法进行base64转Blob，方法写在下边
          let newFile = get4(compressData, fileName);
          return newFile;
        }
 
        function get4(dataurl, filename) {
          let arr = dataurl.split(",");
          let mime = arr[0].match(/:(.*?);/)[1];
          let bstr = atob(arr[1]);
          let n = bstr.length;
          let u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          //转换成file对象
          return new File([u8arr], filename, { type: mime });
        }
 
        const file = await get2(e);
        const reader = new FileReader();
        reader.onload = () => {
          const img = new Image();
          img.onload = () => {
            const canvas = _this.$refs.canvas;
            const context = canvas.getContext("2d");
            context.drawImage(img, 0, 0, canvas.width, canvas.height);
            const imageData = context.getImageData(
              0,
              0,
              canvas.width,
              canvas.height
            );
            const code = jsQR(
              imageData.data,
              imageData.width,
              imageData.height
            );
 
            if (code) {
              // console.log("识别成功---", code);
              resolve(code.data);
            } else {
              // console.log("无法识别---", code);
              resolve(false);
            }
          };
          img.src = reader.result;
        };
        reader.readAsDataURL(file);
      });
    },
复制

参考文章：

1.前端JS识别二维码内容_js 解析二维码-CSDN博客

2.js/vue实现远程图片链接本地化_js远程图片本地化_liuliu2021.12的博客-CSDN博客

转载请注明出处或者链接地址：https://www.qianduange.cn//article/4054.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

CSS3渲染器CSS3DRenderer.js和CSS3模型

2024-04-15 21:04:28

transform-origin属性详解

2024-04-15 21:04:23

HTML5 CSS3实现小米商城 （完整版）

2024-04-15 21:04:07

Sass功能

2024-04-15 21:04:07

css flex布局 —— 项目属性 align-self

2024-04-15 21:04:00

Vue3后台管理系统（十三）全屏组件

2024-04-15 21:04:56

css改变图片颜色

2024-03-24 23:03:07

CSS样式：渐变色圆角边框

2024-04-15 21:04:44

【HTML | CSS】纯CSS居然能做出这种效果，一款宝藏网页分享（超详细讲解 | 附源码）

2024-04-15 21:04:20

在css3中如何添加圆角边框、盒子阴影以及文字阴影

2024-04-15 21:04:20

广告位招租：QQ85750956
大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！