+248
@@ -0,0 +1,248 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user