百万前端之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);//取得图像的数据 URIlet 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()}

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

js 根据链接生成二维码
1.引入插件qrcode.min.js 插件线上地址 2. $(".leftqrcode").qrcode({render: 'canvas' || 'table', //方式wi ...
js前端根据链接生成二维码并转成图片下载
js前端根据链接生成二维码并转成图片下载依赖于jquery.jquery.qrcode.min.js 1.html <div class="qrcode"></ ...
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包. 在vue中引入(我这边是vue2).import QRCode from 'qrco ...
js实现将链接生成二维码，并对生成的二维码转换为图片，右击可保存至本地
在vue项目中,实现将链接生成二维码:可识别跳转,将生成的二维码可转换成图片,并可保存至本地.具体操作步骤如下: 1.安装及引用首先,实现这个功能需要使用QRCode和html2canvas,所以在 ...
JS生成二维码以及保存页面为图片的解决方案:html2Canvas+file-saver+qrcodejs2的使用心得以及解决图片失真，保存不完整的解决办法
前言最近因为工作需求,需要前端根据后端传过来的链接生成二维码,并且要使用JS保存页面为图片.然后网上搜了很多解决办法.最终都是用h5的canvas进行绘制然后保存为图片.其中,又以html2Canv ...
qrcode.js使用js生成二维码（并下载）的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎案例场景后台生成邀请链接,前端拿到链接之后处 ...
dom 生成图片和链接生成二维码
1. dom 生成图片此处使用的是 html2canvas 插件和canvas2image插件 html2canvas 方法的第二个入参还有很多选项可以配置,详情请看这里这里 html 1 < ...
前端批量生成二维码并打包下载
前端批量生成二维码并打包下载项目中遇到一个紧急需求在没有后端配合的情况下,前端独自实现生成二维码并打包下载生成二维码:下载 qrcodejs2 批量打包下载:下载 JSZip 和 FileSave ...
微信小程序前端生成二维码并保存（海报同理）
这里写自定义目录标题 1.前端生成二维码并保存 1.前端生成二维码并保存 1.下载weapp.qrcode.js文件并引入项目中 2.先在wxml文件中构建canvas画布 <canvas st ...

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

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

最新文章

热门文章