-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml2canvas2.html
74 lines (66 loc) · 2.98 KB
/
html2canvas2.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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>截图测试</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="dialog_share" id="capture">
<div class="dialog_share__media">
<img class="dialog_share__img" src="share_cover.jpg" alt="" />
<ul class="chat">
<li class="chat__item reverse">
<div class="chat__avatar">
<img class="chat__avatar_img" src="avatar1.jpg" alt="">
</div>
<div class="chat__bd">
<p class="chat__para"><span class="chat__name">张韶涵</span>谢谢你支持我。</p>
</div>
</li>
<li class="chat__item">
<div class="chat__avatar">
<img class="chat__avatar_img" src="avatar2.jpg" alt="">
</div>
<div class="chat__bd">
<p class="chat__para"><span class="chat__name">飞翔的鹅</span>千万涵粉永相随,来和我支持张韶涵当歌王。</p>
</div>
</li>
</ul>
</div>
<div class="dialog_share__ft">
<div class="dialog_share__bd">
<h6 class="dialog_share__tit">原来TA就是你心中的歌王</h6>
<p class="dialog_share__desc">猜歌王 赢大礼 领取你的歌王属性</p>
</div>
<img class="dialog_share__qrcode" src="qrcode.jpg" alt="" />
</div>
</div>
<script src="html2canvas.min.js"></script>
<script>
var target = document.getElementById("capture");
var width = target.offsetWidth; //获取dom 宽度
var height = target.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale,scale); //获取context,设置scale
var opts = {
scale : scale, // 添加的scale 参数
canvas : canvas, //自定义 canvas
width : width, //dom 原始宽度
height : height //dom 原始高度
};
html2canvas(target, opts).then(function (canvas) {
var dataUrl = canvas.toDataURL('image/jpeg',1);
var newImg = document.createElement("img");
newImg.src = dataUrl;
document.body.appendChild(newImg);
console.log(canvas);
});
</script>
</body>
</html>