专栏首页远在上海一键点击链接(按钮)下载js(jquery.qrcode)生成的二维码图片

一键点击链接(按钮)下载js(jquery.qrcode)生成的二维码图片

上周日最得意的事情莫过于搞定了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属性值,一定要注意。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery Mobile图片轮转轮播

    最近一直很忙,刚抽出一点时间,来看了一下camera,非常好用,这里分享一下,与大家共勉!

    业余草
  • jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

    最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题。这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下...

    业余草
  • jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

    学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了。我根本就没有理由拒绝他的好。这里我有分享一下我对它的配置项的使用说明一下。

    业余草
  • 移动新闻网站,掌上移动新闻,移动新闻客户端,jQuery Mobile移动新闻网站,移动新闻网站demo,新闻阅读器开发

    我们坐在地铁上,常常拿出手机查看新浪移动新闻,腾讯新闻,或者刷微信看新闻等等功能。你们有没有想过他们是如何实现的。移动互联网,越来越热闹了。

    业余草
  • jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

    由于移动设备屏幕宽度较小,所以一般不建议使用多列布局。但有时你可能需要并排放置一些元素(如按钮之类的)。 

    业余草
  • jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo

    我有一个水货的上司,大家都是知道的。所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手...

    业余草
  • jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

    程序员都很赖,你懂的! 最近在做html5页面的开发,主要做智能终端设备的开发。对于内容比较少的页面,领导提出了要将页眉和...

    业余草
  • jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎。而他的各个版本也在持续不断的更新中。同样的我也很喜欢它,它加快了我们开...

    业余草
  • jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

    在移动互联网时代,HTML5开发越来越收到欢迎。于是各种HTML5的框架都出来了。由于对于jquery的熟悉,jquery ...

    业余草
  • mina的编码和解码以及断包的处理,发送自定义协议,仿qq聊天,发送xml或json

    最近一段时间以来,mina很火,和移动开发一样,异常的火爆。前面写了几篇移动开发的文章,都还不错,你们的鼓励就是我最大的动力...

    业余草

扫码关注云+社区

领取腾讯云代金券