叨叨念：学期末的月实训周又开始了，今天下来了个前端大作业，要求纯前端实现二维码生成+二维码识别+图片文字识别、语言识别。这前两者我还能理解，后面这两个难道不是调包？这作业有什么意义呢？无论如何，既来之则安之。作为一个后端开发菜鸟，我又一次发挥了“天赋”神学，花3小时完成了作业。

二维码生成

首先是二维码相关的 JavaScript 库，qrcanvas，使用起来并不难，data 就是二维码的文本。

我们使用 JQuery 封装一个起函数用于绘制二维码，该函数需要传入了文本，然后对 <div id="qrcode"></div> 进行渲染。

//绘制二维码
function drawQrCode(text) {
  var canvas = qrcanvas.qrcanvas({
    data: text
  });
  $('#qrcode').html(canvas);
}

由于二维码有地址也有普通文本，我们可以分成两个 input 标签。

<input id="urlCode" type="text" placeholder="https://"/>
<p>
<textarea id="contextCode" rows="6" style="width: 60%" placeholder="请直接输入内容，系统会自动生成二维码。"></textarea>
<div id="qrcode">暂未生成二维码图片</div>

监听两个输入框内容的变化，实时生成最新的二维码展示。

//监听地址框的内容
$('#urlCode').bind('input propertychange', 'input', function (e) {
  var text = $('#urlCode').val();
  //生成二维码
  drawQrCode('https://' + text);
});

//监听文本框的内容
$('#contextCode').bind('input propertychange', 'textarea', function (e) {
  var text = $('#contextCode').val();
  //生成二维码
  drawQrCode(text);
});

接下来是细节上的优化

  • 当一个输入框有内容时，另一个框应该禁用，避免二维码内容冲突。
  • 输入框文本的前后空格习惯性要剔除
  • 输入框文本需要判断是否为空

优化后的代码

//监听地址框的内容
$('#urlCode').bind('input propertychange', 'input', function (e) {
  var text = $('#urlCode').val();
  text = lrtrim(text);
  if (!isEmpty(text)) {
    $('#contextCode').attr("disabled", true);
    //生成二维码
    drawQrCode('https://' + text);
  } else {
    $('#qrcode').html('');
    $('#contextCode').attr("disabled", false);
  }
});

//监听文本框的内容
$('#contextCode').bind('input propertychange', 'textarea', function (e) {
  var text = $('#contextCode').val();
  text = lrtrim(text);
  if (!isEmpty(text)) {
    $('#urlCode').attr("disabled", true);
    //生成二维码
    drawQrCode(text);
  } else {
    $('#qrcode').html('');
    $('#urlCode').attr("disabled", false);
  }
});

//绘制二维码
function drawQrCode(text) {
  var canvas = qrcanvas.qrcanvas({
    data: text
  });
  $('#qrcode').html(canvas);
}

二维码识别

比较简单，将图片上传，然后传入函数即可识别。

<div style="display: flex;align-items:center;">上传二维码：<input type="file" id="img_jx"></div>
<br />
<div><textarea id="text" style="width: 60%" rows="10" placeholder="解析结果..."></textarea></div>

解析二维码的核心代码，调用 analyticCode() 传入临时文件。

//解析二维码图片
$("#img_jx").on('change', function () {
  analyticCode.getUrl(
    'file-url', this,
    function (url) {
      //解决中文乱码的问题
      url = decodeStr(url);
      //将内容进行渲染
      $('#text').val(url);
    }
  )
});

细节上，我们最好是给个清除原本文件，避免二次干扰。

//清空原图片
$("#img_jx").click(function () {
  $("#img_jx").val('');
});

图文识别

在我多次搜罗后，发现阿里云的通用图片文字识别是最便宜的，0.01/500次。

定义页面结构，左右布局。

<div>
  <h1>图片文字识别</h1>
  <input id="urlImage" type="text" placeholder="图片地址" style="margin: 5px;"
         value="https://i0.hdslb.com/bfs/album/627875bcf3e5d958a43fb344cffa544e0f15defc.jpg">
  <button id="identifyBtn" type="button">开始识别</button>
  <img src="https://i0.hdslb.com/bfs/album/5458a5d21119b7a6979d896952bf8529fa5bea5d.jpg" alt=“测试用图”
       id="imgIdentify">
  <ul class="list-group" id="words">
    <li class="list-group-item">王娜是哈哈</li>
  </ul>
</div>

参考帮助文档后，我们定义一个数据体，其中 "image" 是图片地址。

var org = {
  "image": 'https://i0.hdslb.com/bfs/album/5458a5d21119b7a6979d896952bf8529fa5bea5d.jpg',
  'configure': {
    "min_size": 16,
    "output_prob": true,
    "output_keypoints": false,
    "skip_detection": false,
    "without_predicting_direction": false
  }
}

使用 ajax 发送请求

$.ajax({
  url: 'https://tysbgpu.market.alicloudapi.com/api/predict/ocr_general',
  type: 'post',
  dateType: 'json',
  headers: {
    'Authorization': 'APPCODE xxxxxxxxxxxx',
    'Content-Type': 'application/json; charset=utf8'
  },
  data: JSON.stringify(org),
  success: (response) => {
    $('#words li').remove()
    for (var data in response.ret) {
      // console.log(data)
      $('#words').append(
        `<li class='list-group-item'>${response.ret[data].word}</li>`
      )
    }
  }
})

'Authorization': 'APPCODE xxxxxxxxxx', xxxxxxxxxxxx 是购买后提供的密钥。

当然，我们得去监听输入框的图片地址，结合 ajax 代码如下：

$('#identifyBtn').click(() => {
  var src = $('#urlImage').val();
  text = lrtrim(src);
  if (!isEmpty(src)) {
    $("#imgIdentify").attr('src', src);
    org.image = src;
    $.ajax({
      url: 'https://tysbgpu.market.alicloudapi.com/api/predict/ocr_general',
      type: 'post',
      dateType: 'json',
      headers: {
        'Authorization': 'APPCODE xxxxxxxxxx',
        'Content-Type': 'application/json; charset=utf8'
      },
      data: JSON.stringify(org),
      success: (response) => {
        $('#words li').remove()
        for (var data in response.ret) {
          // console.log(data)
          $('#words').append(
            `<li class='list-group-item'>${response.ret[data].word}</li>`
          )
        }
      }
    })
  }
})

最后预览。

版权属于：乐心湖's Blog

本文链接：https://xn2001.com/archives/652.html

声明：博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！

Last modification：June 15, 2021
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏