JS生成二维码

效果
扫描二维码可访问指定链接或当前网站链接,内容可以自己更改
“复制链接”,点击按钮复制当前网站链接
如何获取当前网站链接

源码

textarea{opacity: 0;/*display: none;*/z-index: -999;
}
button{margin-left: -90px;border: 1.5px solid #000;padding: 3px 8px;font-size: 24px;
}

<div class="shareBox"><span id="qrcode" onclick="download()"></span><div id="qrcodeWord" onclick="copyHref()" onclick="copyHref()"><textarea id="inputTextarea"></textarea><button>复制链接</button></div>
</div>

//生成二维码
qrcode = new QRCode(document.getElementById("qrcode"), {text: document.location.href,//链接地址width : 300,//二维码宽高height : 300,colorDark : "#000000",//二维码前景色colorLight : "#fff",//二维码背景色correctLevel : QRCode.CorrectLevel.H
});

生成当前网站链接的二维码
- text: document.location.href
- document.location.href就是获取当前网站的链接
当然也可以自己更改二维码
- text: “自己想要的链接”
- text: “https://MrFlySand.github.io”

//点击二维码下载图片
function download(){var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值，并修改响应头部。　　　var filename='blog-'+document.title+'.png';//保存的图片名称和格式，canvas默认使用的png格式。这个格式效果最好。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);
}
//复制当前网站链接function copyHref(){ var input = document.getElementById("inputTextarea");input.value = document.location.href; // 修改文本框的内容input.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令alert("复制成功\n(点击下载二维码或使用手机浏览器设置成桌面版显示可以转发二维码)");
}

以上代码要先引入JQuery和qrcode

<script src="jquery.min.js"></script>
<script src="qrcode.min.js"></script>

JQuery
复制源码
qrcode
复制源码

----------分割线----------

个人主页 https://MrFlySand.github.io
联系QQ:2602629646

JS生成二维码以及点击下载二维码相关推荐

响应式高端网站模板源码图库素材资源下载平台源码
首发好看的响应式高端网站模板源码图库素材资源下载平台源码(可运营)可用于做娱乐网资源网,功能非常的齐全无任何加密也无任何后门!响应式高端网站模板源码图库素材资源下载平台源码页面很美观,堪比大型网 ...
js小demo2（淘宝点击关闭二维码）
核心思路: 1.利用样式的显示和隐藏完成, display:none 隐藏元素 display:block 显示元素 2.点击按钮,就让这个二维码盒子隐藏起来即可当鼠标点击二维码关闭按钮的时候,则关 ...
微信小程序webview识别二维码长按点击识别二维码
场景:微信小程序,使用webview控件.需求:点击图片后长按图片出现"识别二维码" 1.JS代码: <script src="http://res.wx.qq.c ...
Vue生成带图片logo以及文字的二维码组件，可下载二维码为图片，附组件调用代码--核心qrcode
目录 1.初始化qrcode 2.二维码生成以及下载组件代码可以自己控制是否生成logo以及文字说明 3.父页面调用组件代码 1.初始化qrcode cnpm install --save qrco ...
js生成二维码，并将生成的二维码进行保存（手动下载）
生成二维码并保存为图片,点击下载此二维码简单实现的效果,如有更好的请指教利用jquery 加jquery.qrcode //外部的js<script src="./jquery/2 ...
前端QRCode.js生成二维码插件
填报二维码生成 http://code.ciaoca.com/javascript/qrcode/demo/ git仓库地址 <el-table :data="scenicForm&q ...
【Vue+Java】前后端联动生成下载二维码
目录指引背景运用场景环境丑话说在前前端部分通过axios请求传参二次封装axios.create方法定义download方法,通过axios进行传参前端vue页面方法 HTML部分按 ...
网页生成二维码把二维码变成图片下载二维码
目录网页生成二维码 1 将二维码变成图片 2 1效果:二维码变成了图片 2 下载二维码 2 1全部代码 3 网页生成二维码导入生成二维码需要的js文件(https://github.com/lrs ...
PHP -----微擎内置方法生成二维码和下载二维码
1.新建一个类文件code.php,主要用于处理二维码的方法: 在页面的顶部引用: load()->library('qrcode'); class code{//方法写在这 } 2.生成二维 ...

JS生成二维码以及点击下载二维码

JS生成二维码

源码

----------分割线----------

JS生成二维码以及点击下载二维码相关推荐

最新文章

热门文章