js技能提升——字符串转为base64格式的图片路径(qrcode.js的使用)

我就是我 2021-09-07 15:50 3258阅读 0赞

应用场景：

之前写过一篇关于不干胶条形码打印的文章，这次功能是与之相关的……  
[apicloud不干胶条形码的打印：https://blog.csdn.net/yehaocheng520/article/details/116145473?spm=1001.2014.3001.5501][apicloud_https_blog.csdn.net_yehaocheng520_article_details_116145473_spm_1001.2014.3001.5501]

条形码打印结果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
当条形码内容过多时，导致生成的条形码长度过长，超出不干胶宽度，此时在不干胶宽度固定的情况下，只能将条形码转化为二维码。

由于此功能是用在打印扫码一体机上面的，因此根据厂家提供的接口文档，发现是有打印二维码的功能的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

代码：  
`modulePrintlc.printQR ({text:jpObj.ProNo, height:'150', width:'150'});`  
效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
此时功能已经实现，但是二维码大小有点小，需要调大，打印二维码的接口中有个`width`和`height`的参数，可以用来设置二维码的大小：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
设置二维码的宽高后，又出现了新的问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
随着二维码的大小，二维码周围的间距也跟着变大了，这样就导致页面布局不美观。

咨询厂家后，发现如果要调整间距并且保证二维码的大小，需要使用另一个接口进行打印；

打印图片的接口，此接口需要传入一个base64格式的路径：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]  
目前我初始的二维码内容是一串字符，现在要转化为base64格式的路径：

百度的时候如果检索：`js 字符串转base64`则得到的只是字符串转base64格式，而我需要的是base64格式的图片路径；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]  
改变检索条件为：`js 字符串转base64图片`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]  
[js实现base64转化为图片：https://www.cnblogs.com/mlw1814011067/p/13617411.html][js_base64_https_www.cnblogs.com_mlw1814011067_p_13617411.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]  
上面的检索结果都是：在已经有base64格式的内容时，如果转化为图片。

而我想要的是：如何将字符串转化为base64格式，而且是个图片格式的：  
在apicloud模块库中找到一个`createQrcode`，这个模块是使用的`qrcode.js`插件：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]  
[qrcode.js官网地址：http://davidshimjs.github.io/qrcodejs/][qrcode.js_http_davidshimjs.github.io_qrcodejs]

**QRCode.js**  
`QRCode.js`是用于制作`QRCode`的JavaScript库。`QRCode.js`通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。`QRCode.js`没有依赖关系。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]  
qrcode.js使用方法：

1.  引入script文件
2.  有个html结构的div，用于展示二维码图片
3.  javascript部分：页面初始化时需要创建qrcode实例
4.  创建二维码使用：qrcode.makeCode(“xxxxxx”);

下面详细介绍：

### 1.引入qrcode.js文件 ###

`<script type="text/javascript" src="./script/qrcode.js"></script>`  
我是引用的本地下载好的文件，具体文件可以去官网上下载

### 2.html结构：创建存放二维码的div ###

`<div id="qrcode" style="color:#fff;width:0;height:0;overflow: hidden;"></div>`  
因为如果想要用qrcode.js，则会自动渲染到页面上，然后我通过dom获取到对应Img的src就可以获取到base64格式的图片路径了。。。  
真是曲线救国啊……  
由于这个存放二维码的div，我并不想让它显示出来，因此我设置的style大小为0，也可以使用`display:none`;  
设置了display:none属性的元素，图片不会渲染出来，但会加载。

### 3.javascript：页面初始化创建qrcode实例 ###

var qrcode;
    qrcode = new QRCode(document.getElementById("qrcode"), { 
        text: "二维码内容",
        width: 140,
        height: 140
    });

`new QRCode`创建实例时，第一个参数是el元素，我这边选择的当然上上面创建的存放二维码的div，第二个参数就是配置了：`text`为二维码的内容，```width``height```是二维码的大小，这个地方很重要，一开始我为了页面中不展示二维码图片，因此将```width``height```设置为0，结果后面的内容一直创建不出来，我后面设置了```width``height```为1，则可以获取到base64格式的路径了……

### 4.创建二维码使用：qrcode.makeCode(“xxxxxx”) ###

qrcode.makeCode("325235243523425345");//测试数据
    //经过qrcode.makeCode后，页面中就会出现一个Img标签了，img的src就是base64格式的图片路径了
    var src = $api.attr($api.dom("#qrcode img"),'src');//获取对应img中的src属性值
    console.log(src);//下面是打印出来的结果：
    //data:image/png;base64,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
    var base64 = src.replace("data:image/png;base64,","");//由于有特殊要求，需要去掉src前面的部分，可以使用字符串的替换功能，将不需要的部分替换为空即可
    //下面的这个是厂家提供的打印图片的接口，将获取到的base64内容赋值到对应的位置就可以实现打印了
    modulePrintlc.printImage({ 
        "base64":base64,
        "width":140,
        "height":140
    });

### qrcode.js遇到的大坑 ###

![在这里插入图片描述][20210507110912570.png]  
一开始我设置了```width``height```大小为1，结果渲染出来的图片的base64路径只有一部分，页面中的图片也展示不出来，然后我就各种怀疑是不是apicloud控制台做了截取。。。。

昨天晚上，在黄河爱浪大神的帮助下，各种排查问题，终于灵光一现，发现可能是初始化qrcode时设置的`width`和`height`的问题；

问题解决！

再次感谢黄河爱浪大神，大神很优秀，很厉害，很羡慕……  
附上大神的博客地址：  
[黄河爱浪的博客：https://blog.csdn.net/u013350495?spm=1001.2014.3001.5509][https_blog.csdn.net_u013350495_spm_1001.2014.3001.5509]  
厂家也是极度配合，非常感谢！

最终结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 11]

[apicloud_https_blog.csdn.net_yehaocheng520_article_details_116145473_spm_1001.2014.3001.5501]: https://blog.csdn.net/yehaocheng520/article/details/116145473?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/609d24a52bd64859a2dabc7f234b7512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/665624d01c174767a3d6d51c321217b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/acfa681af5a046649acaadaddf880048.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/137d5835e0554f0b8bf0c8a205878f7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/4640a6682a1040e0b4fc8588d605e498.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/1a366f838bfd4b648fcace22b359238d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20210725/1b95b6da3c3f4e69abf6537077134000.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20210725/78a6a2bbfd464886822848e94ac945aa.png
[js_base64_https_www.cnblogs.com_mlw1814011067_p_13617411.html]: https://www.cnblogs.com/mlw1814011067/p/13617411.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20210725/183b43ba6c1c464089c90430170d9735.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]: /images/20210725/8572b947d9654d8fb4bcadbedf39a892.png
[qrcode.js_http_davidshimjs.github.io_qrcodejs]: http://davidshimjs.github.io/qrcodejs/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]: /images/20210725/c472ce0cedd94aceb1ce204661f49102.png
[20210507110912570.png]: /images/20210725/80bc4356d06543b5b2f4db074751f3f6.png
[https_blog.csdn.net_u013350495_spm_1001.2014.3001.5509]: https://blog.csdn.net/u013350495?spm=1001.2014.3001.5509
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 11]: /images/20210725/8a96d28116524c0ead2d9773c4026190.png