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

原创 2018年04月17日 11:38:53

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

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

【github: https://github.com/hongru/canvas2image】

(4) base64  编码辅助文件

使用,两步搞掂啦~:

1. 生成二维码  这个很容易

    a.使用Canvas 生成  $("#code").qrcode(workspointId);

    b.使用Table生成   $("#smallqrcode").qrcode({width: 40,height: 40,text: workspointId});

2.将Html转换成 Canvas 并保存,这里在回调中执行了保存方法  这个也很容易

   html2canvas(document.querySelector(".codeContainer")).then(canvas => {

            Canvas2Image.saveAsJPEG(canvas, 280, 320, "文件名");

    });

  Canvas2Image.saveAsImage 方法 扩展原码方法,增加一个filename 参数

  原: Canvas2Image.saveAsJPEG(canvas, width, height,type)

  改: Canvas2Image.saveAsJPEG(canvas, width, height,type,filename)


资源下载,已上传到CSDN 地址:

https://download.csdn.net/download/ys930126/10354451




【JAVA】URL转二维码以及图片合成

最近项目中有一个需求,要将一个URL链接转成二维码,并合成到一个固定的背景图片上的指定位置。...
  • nbskycity
  • nbskycity
  • 2017-03-28 15:00:06
  • 3798

js将html生成为图片,并保存在本地

html生成图片的方式有很多种,有的需要下载安装插件,如phantomjs 。显得未免麻烦了些,有的又是通过后台来实现的,但个人感觉没必要做这种交互,也没必要在服务端生成这些零时文件,那么问题来了,有...
  • yyhlichao
  • yyhlichao
  • 2016-07-12 15:43:39
  • 21202

利用Java生成二维码

转自:imooc 慕课网QR Code流行的三大国际标准PDF47:不支持中文DM:专利未公开,需支付专利费用QRCode:专利公开,支持中文(Quick Response code)纠错能力L级:约...
  • tuntun1120
  • tuntun1120
  • 2016-11-10 14:41:37
  • 4475

(Java实现)HTML页面转PDF解决方案

最近在工作中遇到了一个很囧的事情。要把HTML页面转换成PDF或者tiff图片等其他形式,目前tiff还是一头雾水,如果各位大师有真的可行的想法(不要是别人那边抄的,百度最近搜索的质量严重的打击了我对...
  • JasonChris
  • JasonChris
  • 2012-06-30 21:53:01
  • 48616

jq生成二维码并将其作为图片下载到本地

  • 2018年04月17日 11:35
  • 47KB
  • 下载

java生成二维码并保存到本地

  • 2017年08月30日 14:20
  • 492KB
  • 下载

Freemaker 模板生成html文件带barcode4j条形码并转PDF

前面野了三篇博客,现在直接结合在一起做一个实例首先生成条形码并且放入html转换成pdf下载下来,将所有功能集合在一起 1.条形码String barcode=BarCodeUtil.create3...
  • chenaini119
  • chenaini119
  • 2016-07-27 10:31:17
  • 775

java 为pdf添加水印图片

from  http://blog.csdn.net/oxiaoxio/article/details/49512763 首先需要引入两个Jar包分别是:iTextAsian.jar 、it...
  • u010820135
  • u010820135
  • 2017-03-23 10:01:51
  • 1200

js将连接生成二维码,并转为图片

var qrcode=$("#code").qrcode({ render:'canvas||table', width: 200, //宽度 ...
  • Tiglle
  • Tiglle
  • 2017-06-09 09:31:58
  • 2899

jquery.qrcode.js

  • 2018年01月09日 21:24
  • 16KB
  • 下载
收藏助手
不良信息举报
您举报文章:纯前端生成二维码(并将Html转换成图片) 下载到本地
举报原因:
原因补充:

(最多只允许输入30个字)