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

    目录

    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、远程图片链接本地化

            页面：

    2. <canvas class="canvas" ref="canvas" style="display: none">canvas>

            1.创建图片

    1.  get2: function (src) {
    2.   let _this = this;
    3.   return new Promise((resolve, reject) => {
    4.     let image = new Image(), resultBlob = '';
    5.     image.setAttribute('crossOrigin', 'anonymous');
    6.     image.src = src;
    7.     image.onload = () => {
    8.       let random = Math.random();
    9.       // 调用方法获取blob格式，方法写在下边
    10.       resultBlob = _this.get3(image,random+".jpg");
    11.       resolve(resultBlob)
    12.     };
    13.     image.onerror = () => {
    14.       reject()
    15.     }
    16.   })
    17. },

            2. 绘画图片

    1. get3(image, fileName) {
    2.   let canvas = document.createElement("canvas");
    3.   let ctx = canvas.getContext("2d");
    4.   let initSize = image.src.length
    5.   let { width } = image, { height } = image;
    6.   //等比缩放第二种 宽或高超过1280，等比缩放
    7.   let rate = 1920 / width > 1;
    8.   let tate = 1920 / height > 1;
    9.   if(!rate){
    10.     let product = 1920 / width;
    11.     width =  Math.floor((width * product)*100)/100;
    12.     height =  Math.floor((height * product)*100)/100;
    13.   }else if(!tate){
    14.     let product = 1920 / height;
    15.     width =  Math.floor((width * product)*100)/100;
    16.     height =  Math.floor((height * product)*100)/100;
    17.   }
    18.   canvas.width = width
    19.   canvas.height = height
    20.   ctx.fillStyle = 'rgba(255, 255, 255, 0)';//透明色
    21.   ctx.fillRect(0, 0, width, height)
    22.   ctx.drawImage(image, 0, 0, width, height)
    23.  
    24.   // 进行最小压缩0.1
    25.   let compressData = canvas.toDataURL('image/jpg', 0.8)
    26.  
    27.   // 压缩后调用方法进行base64转Blob，方法写在下边
    28.   let newFile = this.get4(compressData, fileName);
    29.   return newFile
    30. },

            3.创建文件流

    1. get4(dataurl, filename) {
    2.   let arr = dataurl.split(",");
    3.   let mime = arr[0].match(/:(.*?);/)[1];
    4.   let bstr = atob(arr[1]);
    5.   let n = bstr.length;
    6.   let u8arr = new Uint8Array(n);
    7.   while (n--) {
    8.     u8arr[n] = bstr.charCodeAt(n);
    9.   }
    10.   //转换成file对象
    11.   return new File([u8arr], filename, { type: mime });
    12. },

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

    1. async get1(src){//当需要循环时获取结果使用异步
    2.   let _this=this
    3.   let res2 = await _this.get2(src);
    4.   let formData = new FormData();
    5.   let random = Math.random();
    6.         
    7.   formData.append("random", random);
    8.   formData.append("files", res2);
    9.    //后端接口
    10.   let res = await _this.$http.postFile("/uploadImgForPc", formData);
    11. },

    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--本地文件上传)

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>图片二维码识别title>
    8.   <script src="./jquery.min.js">script>
    9.   <script src="./jsQR.js">script>
    10. head>
    11. <body>
    12.   <span lan_id="bc">选择图片span> <input type="file"  id="pictureChange"/>
    13.      <div>
    14.          <h2>识别结果：h2>
    15.          <ul id="result">ul>
    16.      div>
    17.   body>
    18.   <script type="text/javascript">
    19.         $("body").append('')
    20.         $("#pictureChange").change(function (e) {
    21.             var file = e.target.files[0];
    22.             if(window.FileReader) {
    23.                 var fr = new FileReader();
    24.                 fr.readAsDataURL(file);
    25.                 fr.onloadend = function(e) {
    26.                     var base64Data = e.target.result;
    27.                     base64ToqR(base64Data)
    28.                 }
    29.             }
    30.         })
    31.         function base64ToqR(data) {
    32.             var c = document.getElementById("qrcanvas");
    33.             var ctx = c.getContext("2d");
    34.      
    35.             var img = new Image();
    36.             img.src = data;
    37.             img.onload = function() {
    38.                 $("#qrcanvas").attr("width",img.width)
    39.                 $("#qrcanvas").attr("height",img.height)
    40.                 ctx.drawImage(img, 0, 0, img.width, img.height);
    41.                 var imageData = ctx.getImageData(0, 0, img.width, img.height);
    42.                 const code = jsQR(imageData.data, imageData.width, imageData.height, {
    43.                     inversionAttempts: "dontInvert",
    44.                 });
    45.                 if(code){
    46.                     showCode(code.data)
    47.                 }else{
    48.                     alert("识别错误")
    49.                 }
    50.             };
    51.         }
    52.         function showCode(code){
    53.             $("#result").append("
    54. "+code+"
      55. ")
  • }
  • script>
  • html>

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

    2. <canvas class="canvas" ref="canvas" style="display: none">canvas>
    3. //e 为网络图片路径
    4. async identifyImg(e) {
    5.       let _this = this;
    6.       return new Promise(async (resolve, reject) => {
    7.         function get2(src) {
    8.           return new Promise((res, rej) => {
    9.             let image = new Image(),
    10.               resultBlob = "";
    11.             image.setAttribute("crossOrigin", "anonymous");
    12.             image.src = src;
    13.             image.onload = () => {
    14.               let random = Math.random();
    15.               resultBlob = get3(image, random + ".jpg");
    16.               res(resultBlob);
    17.             };
    18.             image.onerror = () => {
    19.               rej();
    20.             };
    21.           });
    22.         }
    23.  
    24.         function get3(image, fileName) {
    25.           let canvas = _this.$refs.canvas;
    26.           let ctx = canvas.getContext("2d");
    27.           let { width } = image,
    28.             { height } = image;
    29.           //等比缩放第二种 宽或高超过1280，等比缩放
    30.           let rate = 1920 / width > 1;
    31.           let tate = 1920 / height > 1;
    32.           if (!rate) {
    33.             let product = 1920 / width;
    34.             width = Math.floor(width * product * 100) / 100;
    35.             height = Math.floor(height * product * 100) / 100;
    36.           } else if (!tate) {
    37.             let product = 1920 / height;
    38.             width = Math.floor(width * product * 100) / 100;
    39.             height = Math.floor(height * product * 100) / 100;
    40.           }
    41.           canvas.width = width;
    42.           canvas.height = height;
    43.           ctx.fillStyle = "rgba(255, 255, 255, 0)"; //透明色
    44.           ctx.fillRect(0, 0, width, height);
    45.           ctx.drawImage(image, 0, 0, width, height);
    46.  
    47.           // 进行最小压缩0.1
    48.           let compressData = canvas.toDataURL("image/jpg", 0.8);
    49.  
    50.           // 压缩后调用方法进行base64转Blob，方法写在下边
    51.           let newFile = get4(compressData, fileName);
    52.           return newFile;
    53.         }
    54.  
    55.         function get4(dataurl, filename) {
    56.           let arr = dataurl.split(",");
    57.           let mime = arr[0].match(/:(.*?);/)[1];
    58.           let bstr = atob(arr[1]);
    59.           let n = bstr.length;
    60.           let u8arr = new Uint8Array(n);
    61.           while (n--) {
    62.             u8arr[n] = bstr.charCodeAt(n);
    63.           }
    64.           //转换成file对象
    65.           return new File([u8arr], filename, { type: mime });
    66.         }
    67.  
    68.         const file = await get2(e);
    69.         const reader = new FileReader();
    70.         reader.onload = () => {
    71.           const img = new Image();
    72.           img.onload = () => {
    73.             const canvas = _this.$refs.canvas;
    74.             const context = canvas.getContext("2d");
    75.             context.drawImage(img, 0, 0, canvas.width, canvas.height);
    76.             const imageData = context.getImageData(
    77.               0,
    78.               0,
    79.               canvas.width,
    80.               canvas.height
    81.             );
    82.             const code = jsQR(
    83.               imageData.data,
    84.               imageData.width,
    85.               imageData.height
    86.             );
    87.  
    88.             if (code) {
    89.               // console.log("识别成功---", code);
    90.               resolve(code.data);
    91.             } else {
    92.               // console.log("无法识别---", code);
    93.               resolve(false);
    94.             }
    95.           };
    96.           img.src = reader.result;
    97.         };
    98.         reader.readAsDataURL(file);
    99.       });
    100.     },

    参考文章：

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

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

  • 相关阅读:
    18数据接口和selenium
    python爬虫出现问题
    智慧水利水务数字孪生应用，典型业务场景分享
    【springboot异常处理】
    HarmonyOS—代码Code Linter检查
    PostGIS是否有方法能将一个Polygon面切割成若干份小的Polygon面，且每一份的面积差不多大
    多维数据库中的高效计算机制是什么？
    奈奎斯特定理、香农定理
    [InternLM训练营第二期笔记]6.Lagent & AgentLego 智能体应用搭建
    统计学习：逻辑回归与交叉熵损失（Pytorch实现）
  • 原文地址：https://blog.csdn.net/weixin_57844432/article/details/133675146