哪位大神知道这图片是怎么生成的

平凡 · 发表在 2025-11-29 10:05:48

哪位大神知道这种图片怎么生成的，有没有类似的HTML源码

北辰没有林安 · 发表于 2025-11-29 10:23:12

好眼熟，十几年前的贴吧个性签名

青春向上 · 发表于 2025-11-29 10:51:49

大佬别闹，把图片长宽分别扩大，就能看见原文字，只是像素挤一起了。

原图片：

只变宽：

只变长：

诸葛青 · 发表于 2025-11-29 11:12:48

青春向上发表于 2025-11-29 10:51
大佬别闹，把图片长宽分别扩大，就能看见原文字，只是像素挤一起了。
原图片：

你怎么什么都会

改一个名字吧 · 发表于 2025-11-29 12:28:45

青春向上发表于 2025-11-29 10:51
大佬别闹，把图片长宽分别扩大，就能看见原文字，只是像素挤一起了。
原图片：

你怎么什么都会

子宸P · 发表于 2025-11-29 12:50:22

青春向上发表于 2025-11-29 10:51
大佬别闹，把图片长宽分别扩大，就能看见原文字，只是像素挤一起了。
原图片：

你怎么什么都会

NL（努力） · 发表于 2025-11-29 13:21:42

我有软件没有html

青春向上 · 发表于 2025-11-29 13:34:10

本帖最后由青春向上于 2025-11-29 13:37 编辑

html：
https://www.doubao.com/share/code/a343839313332?a=

调整好字体、文字数量、像素，更难辨认。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不对称压缩旋转叠加生成器（字体选择版）</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', sans-serif;
}
body {
padding: 2rem;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.control-box {
background: white;
padding: 1.5rem 2rem;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
width: 100%;
max-width: 900px;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.input-item {
flex: 1;
min-width: 220px;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
label {
font-size: 0.95rem;
color: #555;
font-weight: 500;
}
input[type="text"], input[type="number"], select {
padding: 0.8rem 1rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
transition: border 0.3s;
}
input:focus, select:focus {
outline: none;
border-color: #2196F3;
}
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l4-4H4l4 4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 16px;
}
button {
padding: 0.8rem 1.8rem;
background: #2196F3;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
white-space: nowrap;
margin-top: 1.8rem;
}
button:hover {
background: #1976D2;
}
.result-box {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
text-align: center;
}
h2 {
font-size: 1.2rem;
color: #333;
margin-bottom: 1.5rem;
}
#finalImg {
border: 1px solid #eee;
border-radius: 4px;
background: white;
max-width: 100%;
height: auto;
}
#downloadBtn {
margin-top: 1.5rem;
background: #4CAF50;
}
#downloadBtn:hover {
background: #388E3C;
}
</style>
</head>
<body>
<div class="control-box">
<div class="input-item">
<label for="text1">第一张图文字（例：当你努力成辉煌）</label>
<input type="text" id="text1" value="当你努力成辉煌" placeholder="输入第一张图的文字">
</div>
<div class="input-item">
<label for="text2">第二张图文字（例：莫忘曾经少年时）</label>
<input type="text" id="text2" value="莫忘曾经少年时" placeholder="输入第二张图的文字">
</div>
<div class="input-item">
<label for="fontSelect">选择字体</label>
<select id="fontSelect">
<option value="'Microsoft YaHei', sans-serif" selected>微软雅黑</option>
<option value="'SimSun', serif">宋体</option>
<option value="'SimHei', sans-serif">黑体</option>
<option value="'KaiTi', serif">楷体</option>
<option value="'FangSong', serif">仿宋</option>
<option value="'YouYuan', sans-serif">幼圆</option>
<option value="'STXihei', sans-serif">华文细黑</option>
<option value="'STKaiti', serif">华文楷体</option>
</select>
</div>
<div class="input-item">
<label for="baseLen">最短边长度（像素，对应文字长度）</label>
<input type="number" id="baseLen" value="100" min="50" max="500" placeholder="设置最短边尺寸">
</div>
<button id="generateBtn">生成叠加图片</button>
</div>
<div class="result-box">
<h2>最终叠加图片（不对称压缩+旋转）</h2>
<img id="finalImg" alt="生成的叠加图片" />
<button id="downloadBtn" style="display: none;">下载图片</button>
</div>
<script>
// DOM元素获取（新增字体选择器）
const text1 = document.getElementById('text1');
const text2 = document.getElementById('text2');
const fontSelect = document.getElementById('fontSelect');
const baseLen = document.getElementById('baseLen');
const generateBtn = document.getElementById('generateBtn');
const finalImg = document.getElementById('finalImg');
const downloadBtn = document.getElementById('downloadBtn');
// 1. 生成不对称原始图（新增字体参数）
function createAsymmetryCanvas(text, baseLength, font) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const textLen = text.trim().length || 1;
// 原始尺寸：长=文字长度×最短边，宽=最短边（不对称）
canvas.width = textLen * baseLength; // 长（最长边）
canvas.height = baseLength; // 宽（最短边）
// 绘制文字（使用选择的字体，大小适配最短边）
const fontSize = baseLength * 0.6;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = `${fontSize}px ${font}`; // 应用选择的字体
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
return canvas;
}
// 2. 压缩画布：将最长边变换为与最短边等长（转为正方形）
function compressToSquare(canvas) {
const squareCanvas = document.createElement('canvas');
const ctx = squareCanvas.getContext('2d');
const squareSize = Math.min(canvas.width, canvas.height); // 最短边长度=正方形边长
squareCanvas.width = squareSize;
squareCanvas.height = squareSize;
ctx.drawImage(canvas, 0, 0, squareCanvas.width, squareCanvas.height);
return squareCanvas;
}
// 3. 旋转画布（90度顺时针）
function rotateCanvas(canvas) {
const rotatedCanvas = document.createElement('canvas');
const ctx = rotatedCanvas.getContext('2d');
rotatedCanvas.width = canvas.height;
rotatedCanvas.height = canvas.width;
ctx.save();
ctx.translate(rotatedCanvas.width / 2, rotatedCanvas.height / 2);
ctx.rotate(Math.PI / 2); // 顺时针旋转90度
ctx.drawImage(canvas, -canvas.width / 2, -canvas.height / 2);
ctx.restore();
return rotatedCanvas;
}
// 4. 核心：叠加两张图为一张（传入选择的字体）
function generateFinalImage() {
const text1Val = text1.value.trim() || '文字1';
const text2Val = text2.value.trim() || '文字2';
const selectedFont = fontSelect.value; // 获取选择的字体
const baseLength = parseInt(baseLen.value);
// 步骤1：用选择的字体生成两张不对称原始图
const canvas1 = createAsymmetryCanvas(text1Val, baseLength, selectedFont);
const canvas2 = createAsymmetryCanvas(text2Val, baseLength, selectedFont);
// 步骤2：压缩为正方形
const squareCanvas1 = compressToSquare(canvas1);
const squareCanvas2 = compressToSquare(canvas2);
// 步骤3：旋转第二张图
const rotatedCanvas2 = rotateCanvas(squareCanvas2);
// 步骤4：叠加生成最终图
const finalCanvas = document.createElement('canvas');
const ctx = finalCanvas.getContext('2d');
finalCanvas.width = squareCanvas1.width;
finalCanvas.height = squareCanvas1.height;
ctx.drawImage(squareCanvas1, 0, 0);
ctx.drawImage(rotatedCanvas2, 0, 0);
// 显示与下载
const imgUrl = finalCanvas.toDataURL('image/png');
finalImg.src = imgUrl;
downloadBtn.style.display = 'inline-block';
downloadBtn.onclick = () => {
const link = document.createElement('a');
link.href = imgUrl;
link.download = `不对称叠加图_${Date.now()}.png`;
link.click();
};
}
// 生成按钮事件
generateBtn.addEventListener('click', generateFinalImage);
// 回车触发生成
[text1, text2, fontSelect, baseLen].forEach(el => {
el.addEventListener('keydown', (e) => e.key === 'Enter' && generateFinalImage());
});
// 初始生成一次
generateFinalImage();
</script>
</body>
</html>

复制代码

chppapple · 发表于 2025-11-29 13:41:54

青春向上发表于 2025-11-29 10:51
大佬别闹，把图片长宽分别扩大，就能看见原文字，只是像素挤一起了。
原图片：

你怎么什么都会

[求助问答] 哪位大神知道这图片是怎么生成的

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

发表回复

考神

MT论坛最佳新人

MT论坛活跃会员

MT论坛新人

MT论坛帅哥

挂机大佬