-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (148 loc) · 6.26 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
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成名片</title>
<link rel="stylesheet" href="css/index1.css?x=3">
</head>
<body>
<div class="box">
<div id="container">
<div class="container-border">
<div class="flex">
<img id="img" style="width: 180px;height: 180px;" src="img/img.png" alt="">
<div class="detail font-color">
<div>姓名：<span class="x-nam">樱桃小丸子</span></div>
<div>性别：<span class="x-sex">女</span></div>
<div>年龄：<span class="x-age">18</span></div>
<div>手机：<span class="x-tel">199 3214 6789</span></div>
</div>
</div>
<div class="introduce font-color">
个人简介：<span class="x-desc">在这个世界上，我们不是孤立的存在，而是相互联系的整体。我们要学会与他人相互尊重、理解和支持，共同创造一个更加美好的世界。此外，我们还要注重内心的修炼和成长，不断提升自己的境界和智慧。</span></span>
</div>
</div>
</div>
<div class="rightConent">
<div style="position: relative">
<input class="file-input" type="file" onchange="changeImgFile(this)" name="myfile">
<div class="file-font">上传头像</div>
</div>
<div class="inputBox">
<input class="nam" type="text" value="" placeholder="请输入姓名">
<input class="sex" type="text" value="" placeholder="请输入性别">
<input class="age" type="text" value="" placeholder="请输入年龄">
<input class="tel" type="text" value="" placeholder="请输入手机">
<input class="desc" type="textarea" value="" placeholder="请输入简介">
<!-- <input class="picname" type="text" value="" placeholder="图片名"> -->
</div>
<div class="bg-style">
<div class="green bg" data="green">绿色</div>
<div class="purple bg" date="purple">紫色</div>
<div class="black bg" data="black">黑色</div>
</div>
<div id="saveBtn">下载保存名片</div>
</div>
</div>
</body>
</html>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/html2canvas.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// canvas生成图片
$("#saveBtn").on("click", function () {
let getPixelRatio = function (context) { // 获取设备的PixelRatio
let backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 0.5;
return (window.devicePixelRatio || 0.5) / backingStore;
};
let nam = $('.nam').val()
let sex = $('.sex').val()
let age = $('.age').val()
let tel = $('.tel').val()
let desc = $('.desc').val()
if (nam) {
$('.x-nam').text(nam)
}
if (sex) {
$('.x-sex').text(sex)
}
if (age) {
$('.x-age').text(age)
}
if (tel) {
$('.x-tel').text(tel)
}
if (desc) {
$('.x-desc').text(desc)
}
let generateName = $('.picname').val() ? $('.picname').val() + ".jpg" : '默认' + ".jpg"//图片名
let ImageContainer = document.getElementById("container");
let width = ImageContainer.offsetWidth;
let height = ImageContainer.offsetHeight;
let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');
let scale = getPixelRatio(context);
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
context.scale(scale, scale);
let opts = {
scale: scale,
canvas: canvas,
width: width,
height: height,
dpi: window.devicePixelRatio
};
html2canvas(ImageContainer, opts).then(function (canvas) {
context.imageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
let dataUrl = canvas.toDataURL('image/jpeg', 1.0);
dataURIToBlob(generateName, dataUrl, callback);
});
});
})
$(".bg").on("click", function (e) {
console.log(e.currentTarget.classList[0])
$('.container-border').removeClass('green')
$('.container-border').removeClass('purple')
$('.container-border').removeClass('black')
$('.container-border').addClass(e.currentTarget.classList[0])
})
let dataURIToBlob = function (generateName, dataURI, callback) {
let binStr = atob(dataURI.split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (let i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(generateName, new Blob([arr]));
}
let callback = function (generateName, blob) {
let triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", generateName).appendTo("body").on("click", function () {
if (navigator.msSaveBlob) {
return navigator.msSaveBlob(blob, generateName);
}
});
triggerDownload[0].click();
triggerDownload.remove();
};
function changeImgFile(input) {
let file = input.files[0];
if (window.FileReader) {
let fr = new FileReader();
fr.readAsDataURL(file);
fr.onloadend = function () {
document.getElementById("img").src = fr.result;
}
}
};
</script>