-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
149 lines (142 loc) · 6.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>html2img</title>
<!-- html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来 -->
<script src="./assets/html2canvas.js"></script>
<!-- 将canvas图片保存成图片 -->
<script src="./assets/canvas2image.js"></script>
<script src="./assets/base64.js"></script>
<style>
*{ margin: 0; padding: 0; }
body{ font-family: 'Microsoft Yahei'; font-size: 14px; color: #6a6a6a; }
.text-center{ text-align: center; }
#content { border-radius: 3px; overflow: hidden; background-color: white; box-sizing: border-box; padding-bottom: 20px; }
#img-box{ margin-top: 50px; }
#img-box img {
width: 100%;
}
.wave-box{ position: relative; overflow: hidden; }
.wave-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 10086;
}
.wave-back{
height: 400px;
background: url(./assets/breathe.gif) no-repeat;
background-size: cover;
background-position: center;
filter: blur(0) brightness(50%);
-webkit-filter: blur(0) brightness(50%);
}
h2{ color: white; margin-top: 100px;}
h2,p { padding: 5px 4vw; }
p.subcontent{ color: #ccc; }
#content img { width: 92%; margin: 10px 4vw; }
input,button { padding: 5px 10px; border: 1px solid #934699; font-family: 'Microsoft Yahei';}
button{ cursor: pointer; background-color: #934699; color: white; }
#btnSave,#Download { margin: 30px; }
</style>
</head>
<body>
<div id="content">
<div class="wave-box">
<div class="wave-content">
<button id="btnSave" onclick="app.setListener()">转换成图片</button>
<h2 class="text-center">
HtmlToImg Demo
</h2>
<p class="text-center subcontent">by：jczzq</p>
</div>
<div class="wave-back"> </div>
</div>
<p>
《尼尔：机械纪元》除了懂人心的小姐姐2B以外，其自身的的游戏品质也延续了白金工作室的一贯水准，受到了玩家们的欢迎和喜爱，前段时间本作的销量也已突破了100万份。而玩家们的购买热情还不止于此，不少粉丝还希望体验一下前作《尼尔》的魅力，而SE也回应了玩家们的期待。
</p>
<img src="./assets/nier001.jpg" alt="">
<p>
Reddit网友lupianwolf近日发现了这个有趣的现象，他表示PS3版的《尼尔》光盘在欧洲区又重新印制并且上架了SE商店。不知道在其他地区会不会采取同样的举措。
</p>
<img src="./assets/nier002.jpg" alt="">
<p>
《尼尔》本身评价不一，销量也远远不及近日发售的《尼尔：机械纪元》，不过对于粉丝们来说，现在这也是个好机会尝试一下前作《尼尔》，对比、了解一下两部作品间的差异和联系。还能看看各位都很喜欢的扶她小姐姐卡伊奈。
</p>
<img src="./assets/nier003.jpg" alt="">
<p>
《尼尔》发售于2010年，登陆PS3/Xbox 360平台，由Cavia开发，日版和欧美地区发售的版本也存在着一定的差异，例如日版的主角是一位年轻人，而到了欧美地区则变成了一位相当粗犷的壮汉——前者在剧情中是为了拯救自己的妹妹，而后者则是为了拯救自己的女儿。
</p>
<img src="./assets/nier5.jpg" alt="">
<p style="text-align: right">
<input type="text" > <button>评论</button>
</p>
<p style="color:red;">注意：<br>
1.不支持内含跨域图片<br>
</p>
</div>
<hr>
<div id="img-box">
</div>
<script>
var app = {
//设置监听事件
setListener: function () {
this.htmlToCanvas(document.querySelector('#content'));
},
//获取像素密度
getPixelRatio: function (context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
},
//绘制dom 元素，生成截图canvas
htmlToCanvas: function (dom) {
var shareContent = dom;// 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
var width = shareContent.offsetWidth; // 获取(原生）dom 宽度
var height = shareContent.offsetHeight; // 获取(原生）dom 高
var offsetTop = shareContent.offsetTop; //元素距离顶部的偏移量
var canvas = document.createElement('canvas'); //创建canvas 对象
var context = canvas.getContext('2d');
var scaleBy = this.getPixelRatio(context); //获取像素密度的方法 (也可以采用自定义缩放比例)
canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
context.scale(scaleBy, scaleBy);
var opts = {
allowTaint: true,//允许加载跨域的图片
tainttest: true, //检测每张图片都已经加载完成
scale: scaleBy, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: false, //日志开关，发布的时候记得改成false
width: width, //dom 原始宽度
height: height //dom 原始高度
};
html2canvas(shareContent, opts).then(function (canvas) {
var img_data1 = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src');
saveFile(img_data1, 'my-img');
});
}
};
</script>
<script>
// 保存文件
var saveFile = function(data, filename) {
var img = document.createElement('img');
img.src = data;
document.getElementById('img-box').appendChild(img);
// 下载图片
// var event = document.createEvent('Event');
// event.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
// img.dispatchEvent(event);
};
</script>
</body>
</html>