QRCode.js的使用——apicloud和h5使用区别

男娘i 2022-10-16 06:16 193阅读 0赞

之前的一篇文章中，有讲到一个应用场景：  
需求：将字符串转化为`base64`格式的图片路径，链接如下：

[qrcode.js实现字符串转base64格式的图片路径：https://blog.csdn.net/yehaocheng520/article/details/116482430?spm=1001.2014.3001.5501][qrcode.js_base64_https_blog.csdn.net_yehaocheng520_article_details_116482430_spm_1001.2014.3001.5501]

写法其实很简单，但是今天突然发现图片路径拿不到了……  
之前获取src的方式是apicloud的写法：  
`var src = $api.attr($api.dom("#qrcode img"),"src")`

## h5端qrcode生成二维码 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
通过浏览器控制台的识别功能，可以看到`html`结构是`id为qrcode的dom元素里面有个canvas和一个Img标签，这个img标签中的src就是我们想要的base64格式的数据了`

**获取以上结构中的`src`的方式是：**  
`$("#qrcode img")[0].src;`  
控制台打印后，结果发现是`undefined`  
然后我打印了一下`html`结构  
`$("#qrcode").html()`  
控制台打印的结果是：  
![在这里插入图片描述][20210527141602334.png]  
发现`img`标签中的`display:none`，也就是说`img`标签根本没有渲染。所以也就无法获取到`src`属性值。  
考虑到`qrcode.js`是通过`canvas`绘制的图片，有渲染时间，因此可以将异步变成同步进行处理，最简单的方式就是加个延时函数。  
如下:

此时控制台的打印结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
但是通过`console.log($("#qrcode>img").src);`还是无法拿到`src`的属性值。  
需要换种方式来处理：  
`console.log( document.querySelector("#qrcode>img").getAttribute("src") );`  
此时控制台可以打印出`src`的属性值了。效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
h5端的结束！！

## apicloud端生成二维码 ##

代码如下：

通过`alert(document.querySelector("#qrcode").innerHTML);`可以弹出整个的`html`结构；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
通过`alert(document.querySelector("#qrcode>img").getAttribute("src"));`可以弹出`src`的内容；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
这个弹窗是在`apicloud`编辑器中弹窗的，但是在手机端的`apploader`上，弹窗打印的内容并非如此：  
第一个弹窗的内容显示的内容为：  
`<canvas width="100" height="100" style="display: none;"></canvas><img style="display: none;">`  
第二个弹窗的内容显示的内容为:`null`

第一个弹窗打印的内容跟h5端初始时的打印情况一致，并且代码加了500毫秒的延时，但是最终的效果也是没有打印出来。其实现在就很奇怪了，电脑上的`apicloud`软件可以打印出来内容，但是手机端的模拟器打印不出来内容。

最终在大神的指导下，修改成如下的方式：

手机端能够识别到图片并且拿到`src`的关键代码就是这个了，  
`console.log(document.querySelector("#qrcode>canvas").toDataURL('image/jpeg'));`

参考链接：[用canvas的toDataURL()将图片转为dataURL(base64)链接：https://blog.csdn.net/oulihong123/article/details/73927514][canvas_toDataURL_dataURL_base64_https_blog.csdn.net_oulihong123_article_details_73927514]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]  
通过`canvas`绘制的图片，可以通过`canvas.toDataURL("xxxx")`的形式来获取。前面的xxxx部分，是图片的类型，默认的图片类型是`image/png`，也可以自定义比如：`image/jpeg`或者`image/webp`.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]  
问题解决！！

[qrcode.js_base64_https_blog.csdn.net_yehaocheng520_article_details_116482430_spm_1001.2014.3001.5501]: https://blog.csdn.net/yehaocheng520/article/details/116482430?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221014/19c28e852e1d4a79a3ca2c91498f0682.png
[20210527141602334.png]: /images/20221014/94cab1479ac9429d9c355e670ba3e35a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221014/fc4f4f318fab46d4813a0cbbf153d6a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221014/288f4f5e96ea425e83b662dcb8ecaa97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221014/0e1e6cb7f6f94b8d837c3265c7199fa6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20221014/abc66b0c157941ad94322393f739e8f1.png
[canvas_toDataURL_dataURL_base64_https_blog.csdn.net_oulihong123_article_details_73927514]: https://blog.csdn.net/oulihong123/article/details/73927514
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20221014/2ef8b77964324cb1bf06c3aaa2abf68a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20221014/36860784bff544c3982a69cac93afd25.png