Hello! 欢迎来到小浪资源网!


如何将二维码与文字说明结合并生成一张PNG图片?


如何将二维码与文字说明结合并生成一张PNG图片?

结合二维码展示文字说明,生成 png 图片的贴心解决办法

想要在二维码中添加文字说明,却又被二维码遮挡而苦恼?别担心,用这款妙招,让你轻松实现文字和二维码的完美呈现。

在你的 html 代码中,将二维码和下面的文字分开,如下所示:

<div class="qrcode-container" style="position: relative; display: inline-block;">   <div id="qrcode-your_qr_id"></div>   <div class="qrcode-label">your qr code label</div> </div>

其中,”your_qr_id” 为你生成二维码的 div 的 id,”your qr code label” 为你要展示的文字说明。

接下来,你只需要引入 html2canvas 插件,它能够将 html 内容转换成图片:

<script src="path/to/html2canvas.min.js"></script>

最后,在生成二维码的 JavaScript 代码中,使用 html2canvas 将整个二维码容器转换成 png 图片并保存:

html2canvas(document.getElementById('qrcode-container')).then(function(canvas) {   canvas.toBlob(function(blob){saveAs(blob,"your_image.png");}); });

这样,带有文字说明的二维码 png 图片就大功告成了!

相关阅读