JS实现链接生成二维码并转为图片

作者：青柠

时间：2026-10-22

本文介绍如何使用JavaScript结合qrcodejs插件，将指定链接生成二维码并转换为图片。通过配置插件参数，可自定义二维码的宽高及渲染方式，最终获取图片数据URL并展示或保存。

文章目录

JS实现链接生成二维码并转为图片

本文介绍一种利用JavaScript将链接转换为二维码，并进一步将其转化为图片的技术方案，供读者参考。


<div id="code"></div>
<img id="img"/>
<script type="text/javascript">
  var qrcode=$("#code").qrcode({
    render:'canvas||table',
    width: 200, //宽度
    height:200, //高度
    text: "http://www.baidu.com" //任意内容
  }).hide();
  var canvas=qrcode.find('canvas').get(0);
  //如果有循环,此句必不可少 qrcode.find('canvas').remove();
  var data = canvas.toDataURL('image/jpg');
  $('#img').attr('src',data) ;
  saveFile(data,"fd范德萨范德萨");
  //转为图片的方法,需要上门的data
  function saveFile(data,filename){
    var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href=data;
    save_link.download=filename;
    var event=document.createEvent('MouseEvents');
    event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
    save_link.dispatchEvent(event);
  };
</script>

本方案依赖于qrcodejs插件，该插件的GitHub仓库地址为https://github.com/davidshimjs/qrcodejs。

此外，推荐两款在线二维码工具供参考：

在线生成二维码工具（加强版）：http://tools.jb51.net/transcoding/jb51qrcode

在线二维码解码识别工具：http://tools.jb51.net/transcoding/trans_qrcode

如需了解更多JavaScript相关知识，可参考本站的《JavaScript图片操作技巧大全》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》等专题。

希望本文内容对JavaScript编程有所帮助。