百万前端之js通过链接生成二维码可以保存下载复制

在前端工作中，会遇到很多邀请好友的需求，这个时候就需要前端对需求进行实现了。

最终效果：

这个是做好以后的成品，根据链接生成二维码，提供保存二维码和复制链接功能，纯前端实现。话不多说直接上代码

html:

//存放二维码和链接  注意！存放链接的input标签不可以禁用，只能maxlength="0" readonly="readonly让input不能输入即可
<div class="invitation-http">
            <div class="invitation-http-code" id="invitationma"></div>
            <div style="font-size: 14px;margin-left: 10%;">
                <label for="copy">邀请链接：</label>
                <input type="text" id="copy" value="www.csdn.com" maxlength="0" readonly="readonly">
            </div>
            <div class="invitation-http-btn">
                <button type="button" id="savebtn" class="btnstyle"><span id="download"></span></button>
                <button type="button" id="copybtn" onclick="copyText()" class="btnstyle">复制链接</button>
            </div>
        </div>

css(可以自己调整):

 .invitation-http{width: 92%;height: auto;background-color: white;margin-top: 30rem;margin-left: 4%;padding: 1rem;border-radius: 10px;padding-top: 2rem;}
    .invitation-http-code{width: 30%;margin: 0 auto;}
    .invitation-http-code>img{width: 100%;height: 100%;}
    #copy{margin-top: 1rem;font-size: 14px;color: black;outline: none;border: 0;background: none;text-overflow:ellipsis;width: 40%;}
    #copy2{margin-top: 1rem;font-size: 14px;color: black;outline: none;border: 0;background: none;text-overflow:ellipsis;width: 40%;}
    .btnstyle{width: 30%;height: 2rem;color: white;border: 0;outline: none;background-color:#f98210;border-radius: 3px;}
    canvas{width: 100%;height: 100%;}
    input{text-align: center;}
    #download>a{display: block;color: white;}
    .invitation-http-btn{width:92%;margin-left: 4%;display: flex;justify-content: space-between;margin-top: 2rem;}

核心js代码：

//链接生成二维码
 function creater(text = '') {
        //http://www.baidu.com可以自定义任意你要的链接或者文字
        jQuery('#invitationma').empty().qrcode(text);
        let drawing = document.getElementsByTagName('canvas')[0];
        //确定浏览器支持<canvas>元素
        if (drawing.getContext) {
            let context = drawing.getContext('2d');
            console.log(context);
            //取得图像的数据 URI
            let imgURI = drawing.toDataURL("image/png");

            //显示img格式图片开始(不要此步可以跳过)
            let image = document.createElement("img");
            image.src = imgURI;
        }
    }
//复制链接
function copyText() {
        var copys = document.getElementById("copy");
        copys.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
        alert('{:__(\'Invitation link copied successfully\')}');
    };
//下载二维码图片
$("#savebtn").on("click", function() {
        $("#downloading").trigger('click');
    });

    window.onload = function () {
        refresh();
    };
    function refresh() {
        let text = document.getElementById("copy").value;
        creater(text);
        download_invite_img()
    }