在前端工作中,会遇到很多邀请好友的需求,这个时候就需要前端对需求进行实现了。
最终效果:
这个是做好以后的成品,根据链接生成二维码,提供保存二维码和复制链接功能,纯前端实现。话不多说直接上代码
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()
}