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 画布元素 - &lt;canvas&gt;。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。

阅读原文:https://blog.mazey.net/1926.html

©著作权归作者所有:来自51CTO博客作者mazey的原创作品,如需转载,请注明出处,否则将追究法律责任

好知识,才能预见未来

赞赏

0人进行了赞赏支持

更多相关文章

  1. 深入探索Redis的五种基础数据类型
  2. CV学习笔记(二十七):Python Base64 格式图片上传
  3. android中bitmap和drawable之间的转换
  4. Android面试题总结(二) java深入复习
  5. 关于 Eclipse 导出 Android项目 JavaDoc 详细过程
  6. Android性能优化(六)图片压缩
  7. Android(安卓)SurfaceHolder处理SurfaceView的画图
  8. android 获取网络数据,回传到本地用TextView显示乱码问题解决方法
  9. Android(安卓)Canvas使用

随机推荐

  1. Android之RelativeLayout属性
  2. Android 相对布局 RelativeLayout 属性
  3. 创建和使用Android(安卓)library工程
  4. android修改手机虚拟设备管理器路径
  5. android studio 使用adb命令传递文件到an
  6. Android与js交互实例
  7. Unity与Android的互相调用
  8. Android(安卓)平台软件兼容性问题凸显
  9. Android开发进阶:如何读写Android文件
  10. android shape图形整理