JS implémente une méthode pour générer un code QR à partir d'un lien et le convertir en image

Cet article présente principalement la méthode JS pour générer des codes QR à partir de liens et les convertir en images, impliquant le plug-in qrcodejs et les techniques d'exploitation liées à la génération d'images js. Les amis dans le besoin peuvent se référer à ce qui suit

Ceci. l'article explique les exemples Utilisez JS pour implémenter la méthode de génération d'un code QR à partir d'un lien et de sa conversion en image. Je le partage avec vous pour votre référence. Les détails sont les suivants :

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Exemple de comment revenir à la page d'accueil de la page de partage d'applet WeChat

Explication détaillée de ElTableColumn de VUE dans Extension element-ui

Explication détaillée de l'instance de composant dynamique personnalisé Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!