纯前端生成二维码(并将Html转换成图片) 下载到本地

本文介绍了如何在前端生成二维码并将其转换为图片进行下载,避免了后端处理的压力。主要利用了jquery.qrcode.min.js生成二维码,html2canvas.min.js将Html转为Canvas,canvas2image.js将Canvas转为图片并实现下载。通过修改canvas2image.js的源码,解决了文件名和后缀的问题。所有资源已上传至CSDN。
摘要由CSDN通过智能技术生成

这个也是前人栽树后人乘凉的过程,网上搜罗了一大把资源,最近项目有个需求生成二维码并下载,但是二维码的原文本其实在前台就能拿到,所以想着没必要去后台请求,后端返回文件流下载,直接使用前端生成并下载这样还省去了后端请求的压力。

总共用到了四个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 无后缀。我修改了一小部分源码(也是根据网上资料改的),可自定义文件名和后缀)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值