js 生成二维码并点击下载

html 部分

<h1>文字生成二维码及生成可下载的图片
</h1>
<div><input id="input" value="http://www.baidu.com" type="text"><button type="button" onclick="refresh()">生出来</button></div>
<div id="output"><!--这里放canvas格式的二维码-->
</div>
<p>上面的码是使用canvas标签, 下面的是img标签</p>
<div id="img-qr"><!--放img格式的二维码-->
</div>
<p id="download"><!--放下载链接-->
</p>

我们先引入两个js文件

<script src="http://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

 window.onload = function () {refresh();};function refresh() {let text = document.getElementById("input").value;creater(text);}/*** 生成二维码及下载链接的函数* @param text 传入你要生成二维码的文字*/function creater(text = '') {//http://www.baidu.com可以自定义任意你要的链接或者文字jQuery('#output').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;$("#img-qr").empty().append(image);//显示img格式图片结束(不要此步可以跳过)//显示下载链接开始let a = document.createElement("a");a.href = imgURI;//设置下载链接的文字提示a.innerText = 'download qrcode';//设置下载的文件名a.download = 'test.png';document.body.appendChild(a);$("#download").empty().append(a);//显示下载链接结束}}

界面效果

如果想生成中文，并且出现了乱码，可以使用下面方法将input文字进行转换

function toUtf8(str) {var out, i, len, c;out = "";len = str.length;for (i = 0; i < len; i++) {c = str.charCodeAt(i);if ((c >= 0x0001) && (c <= 0x007F)) {out += str.charAt(i);} else if (c > 0x07FF) {out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));} else {out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));}}return out;}

js 生成二维码并点击下载相关推荐

JS生成二维码以及点击下载二维码
JS生成二维码效果扫描二维码可访问指定链接或当前网站链接,内容可以自己更改 "复制链接",点击按钮复制当前网站链接如何获取当前网站链接源码 textarea{opacity ...
JS生成二维码(兼容各种浏览器及中文）
本文将介绍如何使用JS生成二维码,兼容各种浏览器及手机端,支持中文. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...
qrcode.js使用js生成二维码（并下载）的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎案例场景后台生成邀请链接,前端拿到链接之后处 ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
uniapp weapp-qrcode.js生成二维码，并下载二维码图片
找了很多插件,但是都太复杂,不符合自己的要求找了个最简单的.weapp-qrcode.js ,生成二维码没有问题,但是下载图片获取不到图片路径,自己稍微改造了一下 https://github.co ...
SpringBoot生成二维码扫描并可下载文件
生成二维码扫描并可下载文件 pom.xml 依赖 application.yaml Controller ImageBuilderUtils 工具类适当根据自己的业务需求变通,然后就能轻松使用了, ...
利用qrcode.js生成二维码，并点击按钮下载二维码图片（亲测可用）
话不多说,先上代码(复制即用): <!DOCTYPE html> <html lang="en"> <head><meta charset ...
qrcode——js生成二维码
1.引入 qrcode.min.js(点击下载demo) 2.html: <div id="qrcode"></div> js: var qrcode = ...
qrcode.js 生成二维码包含logo和背景图片及IE下载二维码
思路: 1. 通过qrcode.js 生成带logo的二维码 2. 将背景图片.logo与生成的二维码图通过canvas 绘制在一起形成一个新的canvas 3. 将canvas 转成base64的u ...
JS生成二维码以及保存页面为图片的解决方案:html2Canvas+file-saver+qrcodejs2的使用心得以及解决图片失真，保存不完整的解决办法
前言最近因为工作需求,需要前端根据后端传过来的链接生成二维码,并且要使用JS保存页面为图片.然后网上搜了很多解决办法.最终都是用h5的canvas进行绘制然后保存为图片.其中,又以html2Canv ...

js 生成二维码并点击下载

js 生成二维码并点击下载相关推荐

最新文章

热门文章