CSDN博客文章縮略圖生成器
起因：
- 之前注意到CSDN可以隨機選取文章縮略圖，但后來這個功能似乎取消了。于是我想調整一下縮略圖的配色方案。
html制作界面
界面分上下兩塊區域，上面是參數配置，下面是效果預覽圖。
-
參數配置：
- 文本內容自定義：輸入關鍵詞生成圖片中間的文本內容（建議簡短）；
- 背景色調整：提供預設顏色選項和通過顏色選擇器選擇顏色；
- 圖片尺寸：默認寬480像素，高270像素
-
功能說明：
- 由選擇顏色或隨機生成顏色生成圖片，如果不滿意還可以預設顏色，之后可以把圖片保存下來，通過重置參數就可以達到隨機生成的效果；
- 由選擇顏色或隨機生成顏色生成圖片，如果不滿意還可以預設顏色，之后可以把圖片保存下來，通過重置參數就可以達到隨機生成的效果；
生成效果
- 生成的效果圖
代碼部分
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>CSDN博客文章縮略圖生成器</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;}.container {text-align: center;background: white;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}.form-group {margin-bottom: 10px;}.form-group label {display: inline-block;width: 100px;text-align: right;margin-right: 10px;}.form-group input[type="text"],.form-group input[type="number"]{padding: 5px;width: 200px;margin-left: 10px;}.form-group input[type="color"] {padding: 0;width: 210px;margin-left: 12px;border: none;cursor: pointer;}.form-group select {padding: 5px;width: 213px;margin-left: 10px;border-radius: 4px;border: 1px solid #ccc;}.form-group select:disabled {background-color: #eee;cursor: not-allowed;}.form-group select:hover {border-color: #888;}.controls {display: flex;justify-content: center;margin-top: 20px;align-items: center;flex-wrap: nowrap;margin-top: 20px;gap: 20px;}.controls button {margin-top: 10px;padding: 8px 16px;cursor: pointer;}#preview {margin-top: 20px;border-radius: 10px;overflow: hidden;}canvas {width: 100%;height: auto;margin-top: 20px;border-radius: 10px;}</style>
</head>
<body>
<div class="container"><h2>CSDN博客文章縮略圖生成器</h2><!-- 配置選項 --><div class="form-group"><label for="text">文本內容：</label><input type="text" id="text" placeholder="請輸入文本內容" value="#示例文本"/></div><div class="form-group"><label for="presetColors">顏色預設：</label><select id="presetColors" onchange="applyPresetColor()"><option value="" selected>請選擇</option><option value="#FE5F20">Java專欄色</option><option value="#5E61CB">學車專欄色</option><option value="#3A80A8">數據庫專欄色</option><option value="#34B3BC">其他專欄色</option><option value="#90839B">(其他)Linux文章色</option><option value="#34B3BC">(其他)軟件文章色</option></select></div><div class="form-group"><label for="bgColor">背景顏色：</label><input type="color" id="bgColor" value="#ffffff"></div><div class="form-group"><label for="width">寬度：</label><input type="number" id="width" value="480"/></div><div class="form-group"><label for="height">高度：</label><input type="number" id="height" value="270"/></div><div class="controls"><button onclick="generateImage()">生成圖片</button><button onclick="downloadImage()">保存圖片</button><button onclick="resetColor()">重置參數</button></div><!-- 預覽區域 --><div id="preview"><canvas id="myCanvas"></canvas></div>
</div><script>const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");// 顏色值校驗function isValidHexColor(color) {const regex = /^#([0-9A-Fa-f]{6})$/;return regex.test(color);}// 顏色隨機function getRandomColor() {return '#' + Math.floor(Math.random()*16777215).toString(16);}// 重置顏色參數function resetColor() {document.getElementById("presetColors").value = ""; // 清空下拉框選擇document.getElementById("bgColor").value = "#ffffff"; // 重置顏色選擇器為默認白色userSelectedColor = false; // 允許 generateImage 使用隨機色generateImage(); // 重新生成圖片}// 生成漸變色function generateGradient(startColor, endColor, width, height) {let gradient = ctx.createLinearGradient(0, 0, width, height);//gradient.addColorStop(0, startColor);gradient.addColorStop(0.5, adjustBrightness(startColor, -0.1));gradient.addColorStop(1, endColor);return gradient;}// 圖形生成let userSelectedColor = false;function generateImage() {const text = document.getElementById("text").value || "#示例文本內容";const bgColorInput = document.getElementById("bgColor").value;const width = parseInt(document.getElementById("width").value) || 480;const height = parseInt(document.getElementById("height").value) || 270;// 設置畫布尺寸canvas.width = width;canvas.height = height;// 清除畫布ctx.clearRect(0, 0, canvas.width, canvas.height);// 判斷是否用戶選擇了顏色let bgColor;if (userSelectedColor || bgColorInput !== "#ffffff") {bgColor = isValidHexColor(bgColorInput) ? bgColorInput : getRandomColor();} else {bgColor = getRandomColor();}// 創建漸變背景ctx.fillStyle = generateGradient(bgColor, adjustBrightness(bgColor, -0.2), width, height);ctx.fillRect(0, 0, width, height);// 繪制多個斜坡形狀ctx.beginPath();ctx.moveTo(1, height); // A點,左下角ctx.lineTo(width * 0.9, height); // B點,右下角ctx.lineTo(0, height * 0.196); // C點,右上角ctx.closePath();ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';ctx.fill();ctx.beginPath();ctx.moveTo(1, height); // A點,左下角ctx.lineTo(width * 0.45, height); // B點,右下角ctx.lineTo(0, -230); // C點,左上角ctx.closePath();ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';ctx.fill();// 繪制多個半球形狀ctx.beginPath();ctx.arc(width * 0.95, height * 0.1, Math.min(width, height) * 0.2, 0, Math.PI * 2, false);ctx.closePath();ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';ctx.fill();ctx.beginPath();ctx.arc(width * 0.1, height * 0.75, Math.min(width, height) * 0.2, 0, Math.PI * 2, false);ctx.closePath();ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';ctx.fill();// 設置字體樣式//ctx.font = `bold ${Math.min(width / text.length, 60)}px Arial`; // 根據畫布寬度調整字體大小ctx.font = "bold 60px Arial"ctx.textAlign = "center";ctx.fillStyle = "#ffffff";// 計算文字位置以確保居中顯示const metrics = ctx.measureText(text);const x = canvas.width / 2;const y = (canvas.height / 2) + (metrics.actualBoundingBoxAscent / 2);// 繪制文本ctx.fillText(text, x, y);}// 調整圖片亮度function adjustBrightness(hex, correctionFactor) {if (!/^#([0-9A-Fa-f]{6})$/.test(hex)) {console.warn("Invalid color format:", hex);return "#000000"; // fallback}hex = hex.replace(/^#/, '');let r = parseInt(hex.substr(0, 2), 16),g = parseInt(hex.substr(2, 2), 16),b = parseInt(hex.substr(4, 2), 16);// 調整亮度，使用線性方式更直觀r = Math.max(0, Math.min(255, Math.round(r + 255 * correctionFactor)));g = Math.max(0, Math.min(255, Math.round(g + 255 * correctionFactor)));b = Math.max(0, Math.min(255, Math.round(b + 255 * correctionFactor)));// 確保返回為 6 位顏色const toHex = (c) => c.toString(16).padStart(2, '0');return "#" + toHex(r) + toHex(g) + toHex(b);}// 下載圖片function downloadImage() {const link = document.createElement('a');link.download = 'generated-image.png';link.href = canvas.toDataURL('image/png');link.click();}// 預設顏色應用function applyPresetColor() {const colorPicker = document.getElementById('bgColor');if (colorPicker) { // 檢查是否成功獲取到元素const presetColor = document.getElementById('presetColors').value;colorPicker.value = presetColor;generateImage(); // 更新圖片預覽} else {console.error("未能找到ID為'bgColor'的元素");}}// 添加事件監聽器來檢測顏色選擇document.getElementById('bgColor').addEventListener('input', () => {userSelectedColor = true;generateImage(); });// 頁面加載時默認生成一張圖片window.onload = () => generateImage();
</script>
</body>
</html>
)
