如何使用js生成二维码，并保存成图片的样式？

有的时候需要在前段生成二维码，记录下实现方式
1、需要引入jquery.qrcode.js、utf.js这两个库
2、如果单纯展示出来一个二维码，直接使用这个就可以，#code_img为一个容器的dom节点id

        var qrcode=$("#code_img").qrcode({
                render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
                text: "",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
                width : "200",               //二维码的宽度
                height : "200",              //二维码的高度
                background : "#ffffff",       //二维码的后景色
                foreground : "#000000"      //二维码的前景色
                // src: '/img/logo.jpg'             //二维码中间的图片
        })

3、如果需要生成图片的形式

 $(".code").click(function(e){
        console.log(e)
        var qrcode=$("#code_img").qrcode({
                render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
                text: "",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
                width : "200",               //二维码的宽度
                height : "200",              //二维码的高度
                background : "#ffffff",       //二维码的后景色
                foreground : "#000000"      //二维码的前景色
                // src: '/img/logo.jpg'             //二维码中间的图片
        }).hide();
        var canvas=qrcode.find('canvas').get(0);
        //如果有循环,此句必不可少 qrcode.find('canvas').remove();
        var data = canvas.toDataURL('image/jpg');
        $('#img').attr('src',data) ;
        saveFile(data,"图片名字");
        //转为图片的方法,需要上门的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);
        };
       

    });