H5页面转成图片并下载到本地
<!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页面转成图片并下载到本地的更多相关文章
- 将H5页面打包成安卓原生app
第一步:下载HBuilderX,新建项目选择5+App新建一个空项目如下图 新建后项目目录结构如下图 第二步,将你要打包成安卓app的文件打包,最后生成的文件目录如下图 1.打包完成后,将对应文件内容 ...
- 前端如何将H5页面打包成本地app?
大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年.意外发现一个叫Hbuild的软件,简单好用,下面 ...
- 关于jsp页面转换成excel格式下载遇到问题及解决
jsp页面转成excel格式的实现思路: 1.使用poi包:poi-bin-3.9-20121203 下载连接地址:http://www.apache.org/dyn/closer.cgi/poi/r ...
- js中保存成图片并下载
1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...
- js将canvas保存成图片并下载
<canvas id="canvas" width="400" height="400"></canvas> < ...
- hml页面转化成图片
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...
- html2canvas如何将div转成图片并下载,如何将滚动条的内容截取下来
<!DOCTYPE html> <html lang="en"> <head> <meta name="layout" ...
- 把html页面转化成图片——html2canvas
test.html <div class="fx_zhezhao"></div> <div class="myImg"> & ...
- JavaScript实现html页面转换成图片格式
本文提供三个JavaScript插件,并提供对应GitHub地址,自行查看使用方法: 1)dom-to-image:dom-to-image 2)html2canvas:html2canvas 3)r ...
随机推荐
- 创建银行API
DECLARE lc_output VARCHAR2(3000); lc_msg_dummy VARCHAR2(3000); lc_return_status VARCHAR2(3000); lc_m ...
- EasyUI表单验证,自定义插件验证,自定义js插件验证,远程验证,常见手机号,中英文,qq等验证规则验证
{ field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...
- UE4实现描边效果
描边效果属于常见常用的功能,现VR项目中,也需要射线选中一个物体,使物体高亮. 于是在网上找了部分资料,同时也感谢群里的一位大神的提点,总算将描边的功能实现了,这里也写一个简单的示例步骤. 1.我并不 ...
- Java子类实例化的过程
//继承 class Work{ public Work(){ System.out.println("父类中的方法"); } } class Worker extends Wor ...
- java实现:将一个数各个位数相加
前面已经实现过这个程序,现在我们就不多说了,直接更改C的源码,实现这个JAVA程序. import java.util.Scanner; public class HelloWorld { publi ...
- Django练习——TodoList
TodoList是django入门一个比较基础的例程,主要参考如下博客,写的非常好: simple-todo: http://www.cnblogs.com/cacique/archive/2012/ ...
- awk 循环语句例子
awk 循环语句例子 运行结果:
- Java应用程序使用系统托盘资源
要想使自己开发的Java SE项目运行在自己的电脑系统托盘上,这并不是什么难事,总共需要如下几步即可: 1.线判断一下,系统托盘是否可用,否则接下来的程序将不可避免的报出异常咯 2.获得一个Syste ...
- Unity UGUI图文混排源码(二)
Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...
- Web报表工具FineReport二次开发JS之字符串
在报表开发过程中,有些需求可能无法通过现有的功能来实现,需要开发人员二次开发,以FineReport为例,可以使用网页脚本.API接口等进行深入的开发与控制. 考虑到JS脚本开发的使用较多,这里先先简 ...