生存难度系统图像制作器
一个方便的“生存难度系统”图像制作器，可以制作适用于层级等级组件的菱形框内的图片。
使用方式
1. 输入字符，即生存难度图片内的内容。
2. 点击 生成图像，生成图片。
3. 进行微调，通过调整X坐标、Y坐标、颜色及字体大小对图片进行调整。
4. 保存图片，然后上传到任意网站进行使用。
使用示例
[[include component:level-class
|class=符号
|lang=cn/tr
|color=颜色
|image=图片链接
]]
<!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> body { font-family: Arial, sans-serif; text-align: center; margin: 20px; } canvas { border: 1px solid #ccc; margin-top: 20px; } input, button, select { border-radius: 0; border: 1px solid #000; } .control { float: left; width: 50%; margin-top: 10px; } .display { margin-left: 50%; } #outputCanvas { background-color: #e8e9e9; background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%), linear-gradient(-45deg, #ffffff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ffffff 75%), linear-gradient(-45deg, transparent 75%, #ffffff 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } </style> </head> <body> <h1>生存难度系统图像制作器</h1> <div class="control"> <label for="textInput">输入文字：</label><br> <textarea id="textInput" placeholder="输入文字" maxlength="20"></textarea><br> <label for="fontFamily">选择字体：</label> <select id="fontFamily"> <option value="Arial">Arial</option> <option value="Microsoft YaHei">微软雅黑</option> <option value="SimHei">黑体</option> <option value="SimSun">宋体</option> <option value="Times New Roman">Times New Roman</option> </select><br> <label for="fontSizeInput">调整字体大小：</label> <input type="number" id="fontSizeInput" min="24" max="128" value="68"><br> <label for="xInput">X 坐标：</label> <input type="number" id="xInput" placeholder="X 坐标" min="-50" max="280" value="100"><br> <label for="yInput">Y 坐标：</label> <input type="number" id="yInput" placeholder="Y 坐标" min="-50" max="250" value="15"><br> <label for="bgImage">选择背景图片样式：</label> <select id="bgImage"> <option value="MEGImage">普通</option> <option value="MEGImageStar">普通（带星形）</option> </select><br> <label>选择颜色模式：</label> <select id="colorMode"> <option value="solid">纯色</option> <option value="gradient">渐变色</option> </select> <div id="solid"> <label for="s_color">选择颜色：</label> <input type="color" id="s_color" value="#000000"> </div> <div id="gradient" style="display: none;"> <div class="select"> <div> <label for="color1">起始颜色：</label> <input type="color" id="color1" value="#FF0000"> </div> <div> <label for="color2">结束颜色：</label> <input type="color" id="color2" value="#0000FF"> </div> </div> <label for="dir">渐变方向：</label> <select id="dir"> <option value="hor">水平</option> <option value="ver">垂直</option> </select> </div> </div> <div class="display"> <canvas id="outputCanvas" width="236" height="198"></canvas><br> <button onclick="generateImage()">生成图像</button> <button onclick="downloadImage()">下载图像</button> </div> <script src="https://brsandbox-pro.wdfiles.com/local--code/diy-sd-class-img/2"></script> </body> </html>
let imageDataUrl = ''; const bgImages = { "MEGImage":"data:image/png;base64,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", "MEGImageStar": "data:image/png;base64,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" } function generateImage() { const text = document.getElementById('textInput').value; const fontSize = document.getElementById('fontSizeInput').value; const fontFamily = document.getElementById('fontFamily').value; const bgImageID = document.getElementById('bgImage').value; var x = document.getElementById('xInput').value; var y = document.getElementById('yInput').value; x = parseInt(x); y = parseInt(y); const colorMode = document.getElementById('colorMode').value; const canvas = document.getElementById('outputCanvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.crossOrigin = "anonymous"; img.src = bgImages[bgImageID]; img.onload = function () { // 绘制图片 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); // 透明信息 const originalData = ctx.getImageData(0, 0, canvas.width, canvas.height); const originalPixels = originalData.data; let gradient; if (colorMode === 'solid') { // 纯色模式 const color = document.getElementById('s_color').value; ctx.fillStyle = color; ctx.fillRect(0, 0, canvas.width, canvas.height); } else { // 渐变色模式 const color1 = document.getElementById('color1').value; const color2 = document.getElementById('color2').value; const direction = document.getElementById('dir').value; if (direction === 'hor') { gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); } else { gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); // 垂直渐变 } gradient.addColorStop(0, color1); gradient.addColorStop(1, color2); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); } // 恢复透明度 const newData = ctx.getImageData(0, 0, canvas.width, canvas.height); const newPixels = newData.data; for (let i = 0; i < originalPixels.length; i += 4) { newPixels[i + 3] = originalPixels[i + 3]; } ctx.putImageData(newData, 0, 0); ctx.font = `${fontSize}px ${fontFamily}`; ctx.textAlign = "left"; ctx.textBaseline = "top"; const lines = text.split("\n"); for (let i = 0; i < lines.length; i++) { const lineY = y + i * fontSize; if (colorMode === 'solid') { ctx.fillStyle = document.getElementById('s_color').value; } else { ctx.fillStyle = gradient; } ctx.fillText(lines[i], x, lineY); } // 保存结果 imageDataUrl = canvas.toDataURL(); }; } function downloadImage() { if (imageDataUrl) { const a = document.createElement('a'); a.href = imageDataUrl; a.download = 'result_image.png'; a.click(); } else { alert('请先生成图像！'); } } /* function hexToRgb(hexColor) { // const hex = hexColor.replace(/^#/, ''); const bigint = parseInt(hex, 16); return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255]; }*/ function changeColorMode(e) { const mode = e.value; if (mode === 'solid') { document.getElementById('solid').style.display = 'block'; document.getElementById('gradient').style.display = 'none'; } else { document.getElementById('solid').style.display = 'none'; document.getElementById('gradient').style.display = 'block'; } } document.getElementById('colorMode').addEventListener('change', function (e) { changeColorMode(this); });
可能并非最新