通过 JS 将 BSAE64 生成图片并下载
16lz
2021-02-21
HTML：
<div style="display:block;margin:0 auto;width:638px;height:795px;"> <div id="render" >CONTENT</div></div><div id="template" style="margin:10px 0 0 385px;"> <input type="button" onclick="qc0926()" value="下载图片" /></div>JS：
<script type="text/javascript" src="html2canvas.js"></script><script type="text/javascript"> var canvas,render,html,imgsrcgo; function renderHTMLAndSave() { var render= document.getElementById('render'); html2canvas(render).then(function (canvas) { var imgsrc= canvas.toDataURL();imgsrcgo=imgsrc; }); } window.onload=renderHTMLAndSave(); var imgsrc; var imgData; var type='png'; var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; }; function saveFile(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }; function qc0926(){ imgData=imgsrcgo; imgData = imgData.replace(_fixType(type),'image/octet-stream'); // 加工image data，替换mime type var filename = 'zgsjdomaincertification' + '_name' + '.' + type; // 下载后的文件名 window.load=saveFile(imgData,filename); //下载域名证书 };</script>html2canvas.js - 代码：
/* html2canvas 0.5.0-alpha2 <http://html2canvas.hertzen.com> Copyright (c) 2015 Niklas von Hertzen Released under MIT License*/// 篇幅太长，无法保存请查看原文附录：
Base64：Base64 是网络上最常见的用于传输 8Bit 字节码的编码方式之一，Base64 就是一种基于 64 个可打印字符来表示二进制数据的方法。Base64 编码是从二进制到字符的过程，可用于在 HTTP 环境下传递较长的标识信息。采用 Base64 编码具有不可读性，需要解码后才能阅读。
Canvas：Canvas API（画布）是在 HTML5 中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用 JavaScript 操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
阅读原文：https://blog.mazey.net/1926.html
©著作权归作者所有：来自51CTO博客作者mazey的原创作品，如需转载，请注明出处，否则将追究法律责任好知识，才能预见未来
赞赏
0人进行了赞赏支持
更多相关文章
- 深入探索Redis的五种基础数据类型
- CV学习笔记(二十七)：Python Base64 格式图片上传
- android中bitmap和drawable之间的转换
- Android面试题总结（二） java深入复习
- 关于 Eclipse 导出 Android项目 JavaDoc 详细过程
- Android性能优化(六)图片压缩
- Android(安卓)SurfaceHolder处理SurfaceView的画图
- android 获取网络数据，回传到本地用TextView显示乱码问题解决方法
- Android(安卓)Canvas使用