<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>html元素转canvas并一键生成png图片(支持img图片元素)</title>
　　<!-- html2canvas将Dom节点在Canvas里边画出来 -->
　　<script src="js/html2canvas.min.js"></script>

　　<!-- 将canvas图片保存成图片 -->
　　<script src="js/canvas2image.js"></script>
　　<script src="js/base64.js"></script>
　　<style>
　　　　p{
　　　　　　font-size: 15px;
　　　　　　font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif;
　　　　}
　　　　#content{
　　　　　　border-radius: 3px;
　　　　}
　　　　#btnSave,#Download{
　　　　　　position: absolute;
　　　　　　left: 65px;
　　　　　　top: 320px;
　　　　　　width: 78px;
　　　　　　height: 30px;
　　　　　　background-color: #22b4f6;
　　　　　　color: #fff;
　　　　　　text-align: center;
　　　　　　border-radius: 3px;
　　　　　　border: none;
　　　　}
　　　　#Download{
　　　　　　margin-left: 250px;
　　　　}
　　　　.tx,.bt{
　　　　　　border: 1px solid #999;
　　　　　　width: 100px;
　　　　　　height: 20px;
　　　　　　border-radius: 3px;
　　　　}
　　　　.bt{
　　　　　　background-color: #22b4f6;
　　　　　　color: #fff;
　　　　　　text-align: center;
　　　　　　border: none;
　　　　}
　　</style>
</head>
<body>
　　<div id="content" style="width:188px;height:300px;border:1px solid #22b4f6;float:left;text-align:center;">
　　　　<p><img width="50" height="50" src="data:images/1.jpg" alt="头像"></p>
　　　　<p>昵称：richer</p>
　　　　<p>专业：前端 + 后端</p>
　　　　<p>语言：html、php、mysql</p>
　　　　<p>脚本：javascript</p>
　　　　<p><input type="text" class="tx" placeholder="微信公众号开发"></p>
　　　　<p><input type="button" class="bt" value="网站微站开发"></p>
　　</div>
　　<div style="width:60px;height:302px;float:left;text-align:center;line-height:302px;font-size:30px;color:#22b4f6;">==></div>
　　<div id="images" style="width:190px;height:302px;float:left;text-align:center;line-height:302px">图片预览区</div>
　　<button id="btnSave">转成图片</button>
　　<button id="Download">下载图片</button>

　　<script>
　　　　/*生成canvas图形*/

　　　　// 获取按钮id
　　　　var btnSave = document.getElementById("btnSave");
　　　　// 获取内容id
　　　　var content = document.getElementById("content");
　　　　// 进行canvas生成
　　　　btnSave.onclick = function(){
　　　　　　html2canvas(content, {
　　　　　　　　onrendered: function(canvas) {
　　　　　　　　　　//添加属性
　　　　　　　　　　canvas.setAttribute('id','thecanvas');
　　　　　　　　　　//读取属性值
　　　　　　　　　　// var value= canvas.getAttribute('id');
　　　　　　　　　　document.getElementById('images').innerHTML = '';
　　　　　　　　　　document.getElementById('images').appendChild(canvas);
　　　　　　　　}
　　　　　　});
　　　　}
　　</script>
　　<script>
/*
* 说明
* 不支持跨域图片
* 不能在浏览器插件中使用
* 部分浏览器上不支持SVG图片
* 不支持Flash
*/
　　　　var Download = document.getElementById("Download");
　　　　Download.onclick = function(){
　　　　　　var oCanvas = document.getElementById("thecanvas");

　　　　　　/*自动保存为png*/
　　　　　　// 获取图片资源
　　　　　　var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
　　　　　　saveFile(img_data1, 'richer.png');

　　　　　　/*下面的为原生的保存，不带格式名*/
　　　　　　// 这将会提示用户保存PNG图片
　　　　　　// Canvas2Image.saveAsPNG(oCanvas);
　　　　}
　　　　// 保存文件函数
　　　　var saveFile = function(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);
　　};
</script>

</body>

</html>

H5页面转成图片并下载到本地的更多相关文章

  1. 将H5页面打包成安卓原生app

    第一步:下载HBuilderX,新建项目选择5+App新建一个空项目如下图 新建后项目目录结构如下图 第二步,将你要打包成安卓app的文件打包,最后生成的文件目录如下图 1.打包完成后,将对应文件内容 ...

  2. 前端如何将H5页面打包成本地app？

    大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年.意外发现一个叫Hbuild的软件,简单好用,下面 ...

  3. 关于jsp页面转换成excel格式下载遇到问题及解决

    jsp页面转成excel格式的实现思路: 1.使用poi包:poi-bin-3.9-20121203 下载连接地址:http://www.apache.org/dyn/closer.cgi/poi/r ...

  4. js中保存成图片并下载

    1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...

  5. js将canvas保存成图片并下载

    <canvas id="canvas" width="400" height="400"></canvas> < ...

  6. hml页面转化成图片

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  7. html2canvas如何将div转成图片并下载，如何将滚动条的内容截取下来

    <!DOCTYPE html> <html lang="en"> <head> <meta name="layout" ...

  8. 把html页面转化成图片——html2canvas

    test.html <div class="fx_zhezhao"></div> <div class="myImg"> & ...

  9. JavaScript实现html页面转换成图片格式

    本文提供三个JavaScript插件,并提供对应GitHub地址,自行查看使用方法: 1)dom-to-image:dom-to-image 2)html2canvas:html2canvas 3)r ...

随机推荐

  1. Android简易实战教程--第十话《模仿腾讯手机助手小火箭发射详解》

    之前对系统自带的土司的源码做了简要分析,见博客:点击打开链接 这一篇给一个小案例,自定义土司,模拟腾讯卫士的小火箭发射.如果想要迅速看懂代码,建议先去看一下上篇介绍点击打开链接 首先,定义一个服务,在 ...

  2. .so的封装调用

    .so的创建和调用有一个特点,我们要知道.so的调用并不一定必须在Activity中进行,那么制作时也并不一定要在Activity中,但是,一旦.so制作成功,那么再调用时,调用的java类就必须跟制 ...

  3. RMI方式Ehcache集群的源码分析

    Ehcache不仅支持基本的内存缓存,还支持多种方式将本地内存中的缓存同步到其他使用Ehcache的服务器中,形成集群.如下图所示: Ehcache支持多种集群方式,下面以RMI通信方式为例,来具体分 ...

  4. I/O操作之概述与导读

    I/O流可以表示很多不同种类的输入源和输出目的地,包括简单的字节流,基本数据(int.boolean.double等),本地化的字符,以及对象.一些流只是简单地传递数据,还有一些流可以操作和转换数据 ...

  5. Dynamics CRM 修改数据导出到EXCEL的最大条数

    系统默认的最大导出数为一万,这个数可以通过执行以下SQL看到,那要增加导出的最大数量改变MaxRecordsForExportToExcel的值即可. <span style="fon ...

  6. 手把手教你轻松实现listview下拉刷新

    很多人觉得自定义一个listview下拉刷新上拉加载更多是一件很牛x的事情,不是大神写不出来,我想大多数童鞋都是做项目用到时就百度,什么pulltorefresh,xlistview...也不看原理, ...

  7. 如何在Cocos2D 1.0 中掩饰一个精灵(六)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 掩饰一个精灵:实现代码 打开HelloWorldLayer.m并 ...

  8. C# 运行时序列化

    一. 序列化与反序列的作用 为什么要有序列化呢,考虑下面这种情况,在WINFORM或者更为方便的WPF工程中,当我们进行UI设计时,可以随意的将一个控件剪切/张贴到另外一个地方.操作方便的背后是什么在 ...

  9. 【Unity Shaders】Reflecting Your World —— 在Unity3D中创建一个简单的动态Cubemap系统

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  10. SpriteBuilder中使用Node类型的ccb动画节点删除时崩溃的问题

    因为节点需要呈现动画效果,虽然只有两个不同帧. 在SpriteBuilder中新建Bullet.ccb文件,类型为node. 添加如上2张图片,并制作动画效果帧. 在游戏中子弹遇到障碍物会被删除,时机 ...