这个也是前人栽树后人乘凉的过程,网上搜罗了一大把资源,最近项目有个需求生成二维码并下载,但是二维码的原文本其实在前台就能拿到,所以想着没必要去后台请求,后端返回文件流下载,直接使用前端生成并下载这样还省去了后端请求的压力。
总共用到了四个js
(1) jquery.qrcode.min -- 用于生成二维码
【 github: https://github.com/jeromeetienne/jquery-qrcode】
(2) html2canvas.min -- 将Html转换成Canvas画布内容
(任何html内容都可以,不止二维码哈,前提是 display 不能是 none,你看不到,画布自然也不会画)
【官网 http://html2canvas.hertzen.com/】
(3) canvas2image -- 将Canvas画图转换成图片并下载
这个封装了 canvas的DataToURI方法,(ps:因为要浏览器强制下载,源代码其实是有一定的问题,在使用 Mime为 image/octet-stream 时,可以强制下载但是文件的后缀和名称都无法保存,保存到本地文件名默认为 下载 或者 unknow 无后缀。我修改了一小部分源码(也是根据网上资料改的),可自定义文件名和后缀)