一键点击链接(按钮)下载js(jquery.qrcode)生成的二维码图片
一键点击链接(按钮)下载js(jquery.qrcode)生成的二维码图片
崔文远TroyCui
发布于 2019-02-26 15:19:54
发布于 2019-02-26 15:19:54
上周日最得意的事情莫过于搞定了jquery.qrcode生成的二维码图片一键下载。有时候觉得已经生成了二维码图片，直接打印就行了，但是用户总有新需求诞生，于是用户说每次保存二维码的图片，都需要右键点击，然后另存为，能不能直接一个按钮点一下就下载这个二维码呢？能不能直接把二维码图片的名称也在保存的时候自动生成？我的上帝呀，你可以知道你的这么一个小小的要求，我需要折腾多久吗？没错，困扰了1周，最后思考了半天，弄了2个小时程序，才实现了。中间走了不少弯路，期间参考了《点击按钮保存网页中指定的图片，利用js实现》，可惜jquery.qrcode所生成的图片（我用的是image的渲染方式，因为只有这种方式打印的时候能被直接默认打印出来，canvas不行。）不是服务器路径，而是base64的data。
<html>
<head>
<title></title>
<style type="text/css">
.mytab{
border:1px solid gray;
cellspacing:0;
cellpadding:0;
}
</style>
<script language="javascript" type="text/javascript">
function save(){
var img = document.getElementById("testImg");
var oPop = window.open(img.src,"","width=1,height=1,top=5000,left=5000");
for(; oPop.document.readyState != "complete"; ){
if (oPop.document.readyState == "complete")break;
}
oPop.document.execCommand("SaveAs");
oPop.close();
}
</script>
</head>
<body>
<input type="button" value="保存" onclick="save();" /><br/>
<img id="testImg" width="200px" height="200px" src="1.jpg" alt="测试图片js保存" /><br/>
</body>
</html>
于是百度、Google访问外国网站，终于寻得base64图片一键下载的一些思路，于是诞生了以下可执行的代码。
<a id="downloadqrcode" href="" target="_blank" download="姓名-2015/9/7 17:24:49.png">另存为</a>
<script language="javascript" type="text/javascript">
//$(document).ready(function(){
$(window).load(function(){
//console.log("start");
var img = $("#qrcode img")[0].src;
//console.log(img);
$("#downloadqrcode").attr("href",img);
});
</script>
这里为什么不用$(document).ready，是因为jquery.qrcode的渲染是在$(window).load之后才能获取到img的src属性值，一定要注意。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年9月14日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读