通过 JS 将 BSAE64 生成图片并下载
2021-02-21 14:02
881 查看
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 支持脚本化客户端绘图操作。
相关文章推荐
- 通过JS将BSAE64生成图片并下载
- 动态生成二维码图片后通过js(JavaScript)或jq实现网页图片转base64格式下载
- Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)
- 通过js下载图片
- js把通过图片路径生成base64
- 前台js(canvas)生成图片,通过后台java进行保存
- JS将html生成为图片并下载(适用于大多数浏览器,包含手机浏览器等(需配合后台处理))(笔记)
- Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)
- jQuery 通过JS 生成一个自定义下载页面
- 推荐一个网站Js/Css/图片/Html单页面下载工具
- 微信公众平台开发 批量生成及下载带参二维码图片
- javaweb学习总结(九)—— 通过Servlet生成验证码图片
- 通过AFNetworking下载网络闪屏用的图片并存储到本地同时获取header头相关信息
- 从网站上下载js 图片css
- js将网址转为二维码并下载图片
- Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
- php通过修改header强制图片下载的方法
- ThinkPHP微信实例——JSSDK图像接口多张图片上传下载并将图片流写入本地
- 【代码笔记】iOS-通过颜色来生成一个纯色图片
- 通过js实现图片闪播(构想)