zoukankan      html  css  js  c++  java
  • vue将文件流的形式的图形验证码转换成图片

    1.要实现的效果图

     

    2.调取接口,接口返回的数据形式

        

     或者

     打印返回结果为png图像字符串数据

    "�PNG
    u001a
    u0000u0000u0000
    IHDRu0000u0000u0003 u0000u0000u0002Ru0002u0000u0000u0000��6Au0000u0000u0000u0006bKGDu0000�u0000�u0000�����u0000u0000 u0000IDATx���{xT���W xu0000u0006%$F�c F	�"�V��u0000�Pu000f���xEъ��T�[email protected]� u0018�諀`�TJ�Zu0015	�"R��@u000b|H�h8u0005......" 

     或者

     preview查看是张图片

    3.代码实现   

     http.js文件中的post请求方法中的service的参数中添加responseType: 'arraybuffer';

      

      在.vue文件中调取接口:
      this.http.post(path).then((res) => {
        // url 就是图片地址,将url放置在标签img的src属性中,就可以在页面中显示图形验证码
              let url = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
                   this.imageBase64 = url
         });

      在html中:

        <img :src="imageBase64" />
  • 相关阅读:
    浅谈大学两年
    vue的基本操作
    JS执行环境,作用域链及非块状作用域
    关于AJAX异步请求
    第一个go程序和基本语法
    Golang
    11.二叉树
    10.排序
    9.算法之顺序、二分、hash查找
    高性能异步爬虫
  • 原文地址:https://www.cnblogs.com/wangyan0926/p/14958026.html
Copyright © 2011-2022 走看看