URL转为二维码并配上文字说明,可下载带有文字

在页面上需要将一个URL转为二维码并配上文字说明,并提供一个下载按钮,可以下载带有文字说明的二维码图片,效果如下:

如果说只要一个二维码图片,Github上的qrcodejs库就能实现;

但是如果再加上文字说明,情况就变得稍微复杂:

直接在canvas里绘画文字,但是canvas里文字不会换行,虽然可以通过js控制每行文字的数量来换行,但是文字有宽有窄,不是一个好的解决方案;

svg可以将div整个画出来,再导入到canvas里。这时候二维码和文字说明都在一张canvas里,而且文字实际上可以用css的样式来控制。 但是在最后一步,将canvas转换为base64再导出图片的时候栽了跟头,在canvas里用svg画出来的部分最后转为图片的时候不会呈现。

最后在Github发现了html2canvas这个神奇的库,它可以将一个div绘画成canvas。


我觉得这个功能挺实用,下载学习了一下
原文链接:https://juejin.im/post/5a6b3fa051882573485a2d89

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。