248 lines
7.5 KiB
HTML
248 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>简介生成器</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--ink-red: #ff0000;
|
|
}
|
|
|
|
body {
|
|
font-family: "Source Han Sans CN", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
background-color: #f4f4f7;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 40px 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 墨水屏预览区 400x300 */
|
|
#screen-wrap {
|
|
padding: 10px;
|
|
background: #333;
|
|
border-radius: 4px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
#screen-canvas {
|
|
width: 400px;
|
|
height: 300px;
|
|
background-color: #fff;
|
|
color: #000;
|
|
display: flex;
|
|
padding: 25px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 布局样式 */
|
|
.info-side {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-right: 2px solid var(--ink-red);
|
|
padding-right: 15px;
|
|
}
|
|
|
|
#disp-name {
|
|
font-size: 36px;
|
|
font-weight: 900;
|
|
margin-bottom: 5px;
|
|
color: var(--ink-red);
|
|
}
|
|
|
|
#disp-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
background-color: #000;
|
|
color: #fff;
|
|
padding: 2px 8px;
|
|
display: inline-block;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.details {
|
|
font-size: 14px;
|
|
line-height: 1.8;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.qr-side {
|
|
width: 130px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
#qr-img {
|
|
width: 100px;
|
|
height: 100px;
|
|
padding: 5px;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
#disp-qr-label {
|
|
font-size: 12px;
|
|
margin-top: 10px;
|
|
font-weight: bold;
|
|
color: var(--ink-red);
|
|
text-align: center;
|
|
}
|
|
|
|
/* 编辑面板 */
|
|
.editor-panel {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
width: 420px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: #555;
|
|
margin-bottom: 6px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input, textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
outline: none;
|
|
}
|
|
|
|
input:focus { border-color: var(--ink-red); }
|
|
|
|
.btn-download {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background-color: var(--ink-red);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.btn-download:hover { opacity: 0.9; }
|
|
|
|
.hint {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-top: 15px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="screen-wrap">
|
|
<div id="screen-canvas">
|
|
<div class="info-side">
|
|
<div id="disp-name">张三</div>
|
|
<div id="disp-title">全栈开发工程师</div>
|
|
<div class="details" id="disp-details">
|
|
📍 坐标：北京 · 朝阳<br>
|
|
📧 邮箱：zhangsan@dev.com<br>
|
|
🔗 博客：blog.zhangsan.me
|
|
</div>
|
|
</div>
|
|
|
|
<div class="qr-side">
|
|
<img id="qr-img" src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=https://github.com" alt="QR" crossOrigin="anonymous">
|
|
<div id="disp-qr-label">扫码获取简历</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="editor-panel">
|
|
<div class="input-group">
|
|
<label>姓名 (红色)</label>
|
|
<input type="text" id="in-name" value="张三" oninput="update()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>职业标签 (黑底白字)</label>
|
|
<input type="text" id="in-title" value="全栈开发工程师" oninput="update()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>个人简介 (支持换行)</label>
|
|
<textarea id="in-details" rows="3" oninput="update()">📍 坐标：北京 · 朝阳 📧 邮箱：zhangsan@dev.com 🔗 博客：blog.zhangsan.me</textarea>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>二维码链接</label>
|
|
<input type="text" id="in-qr-data" value="https://github.com" onchange="update()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>二维码下方文案 (红色)</label>
|
|
<input type="text" id="in-qr-label" value="扫码获取简历" oninput="update()">
|
|
</div>
|
|
|
|
<button class="btn-download" onclick="downloadImage()">保存图片到本地</button>
|
|
|
|
<div class="hint">
|
|
生成的图片尺寸固定为 400x300，完美适配 4.2" 墨水屏。
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 更新预览内容
|
|
function update() {
|
|
document.getElementById('disp-name').innerText = document.getElementById('in-name').value;
|
|
document.getElementById('disp-title').innerText = document.getElementById('in-title').value;
|
|
|
|
const details = document.getElementById('in-details').value;
|
|
document.getElementById('disp-details').innerHTML = details.replace(/\n/g, '<br>');
|
|
|
|
document.getElementById('disp-qr-label').innerText = document.getElementById('in-qr-label').value;
|
|
|
|
// 二维码更新
|
|
const qrData = encodeURIComponent(document.getElementById('in-qr-data').value);
|
|
// 注意：qrserver支持跨域，html2canvas 才能捕获它
|
|
document.getElementById('qr-img').src = `https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=${qrData}`;
|
|
}
|
|
|
|
// 下载图片功能
|
|
function downloadImage() {
|
|
const screen = document.getElementById('screen-canvas');
|
|
|
|
// 使用 html2canvas 捕捉指定节点
|
|
html2canvas(screen, {
|
|
width: 400,
|
|
height: 300,
|
|
scale: 1, // 保持 1:1 像素
|
|
useCORS: true, // 允许加载跨域二维码图片
|
|
backgroundColor: "#ffffff"
|
|
}).then(canvas => {
|
|
const link = document.createElement('a');
|
|
link.download = `eink_profile_${Date.now()}.png`;
|
|
link.href = canvas.toDataURL("image/png");
|
|
link.click();
|
|
});
|
|
}
|
|
|
|
// 初始运行一次
|
|
window.onload = update;
|
|
</script>
|
|
</body>
|
|
</html> |