linux – 在cron中将wget输出到/ d
441 2023-04-03 02:14:57
$('.qrcode').empty();jQuery('.qrcode').qrcode({ text: "h" /> $('.qrcode').empty();jQuery('.qrcode').qrcode({ text: "h" />
jquery-qrcode是一个用js来生成二维码HTML元素的库,用法简单而且简单(Github 地址)。但是在打印的时候出现了一些问题。
代码如下:
<div class="qrcode"></div>
$('.qrcode').empty();jQuery('.qrcode').qrcode({ text: "hello world", width: 40, height: 40});
这是jquery-qrcode最基本的用法——设置宽高及二维码内容。但是在打印时发现目标div区域是个空的,没有显示出来。检查HTML元素发现二维码其实是一个canvas元素。
<div class="qrcode"> <canvas width="40" height="40"></div>
虽然打印的时候吧canvas传递过去了,但是并没有显示canvas的内容。
尝试添加了一个table属性,能够成功打印出二维码。但是添加了table有几个问题:
这是为什么呢~还是得检查HTML元素啊!
<div class="qrcode"> <table> <tbody> <tr> <td> ... </td> </tr> </tbody> </table></div>
可以看到这个二维码是用HTML的table元素实现的。而这个table中有14个<tr>
标签,而每个<tr>
中有22个<td>
标签。所以需要传输的HTML元素特别多,所以导致了传输速度超慢,实测打印65张带有一个table二维码的纸张需要传输8分钟。
PS:第一次看到这个table我被吓了一跳,莫名其妙怎么多出这么多东西。
而二维码变形的原因也是由于table的缘故,由于父级容器的挤压导致table不得不跟着变形,于是就会出现各种奇怪的形状。
table坑太多,于是绕回来看canvas。突然想到能否将canvas转成img,结果成功了。
$('.qrcode').empty();jQuery('.qrcode').qrcode({ text: ZYH, //render: "table", width: 40, height: 40});var canvas = $('.qrcode canvas')var img = canvas[0].toDataURL("image/png")$('.qrcode').html("<img src='" + img + "'>")
在使用了图片来显示二维码后,变形、不显示、传输慢的问题统统都解决了~希望能给同样遇上这个问题的童鞋一点帮助。