诺壹博客 - 专注于精品技术分享
主页 » 技巧分享 » 正文

文章封面图生成工具

/ in 技巧分享 295

本站的文章封面图就是用该工具实现的,使用tailwindCss构建样式,使用html2canvasJs生成图片。

一个ChatGTP生成的简化版,自行修改测试把,有小部分bug,请自行修改即可

微信截图_20230918114342.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章封面图生成工具</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
    .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .preview {
        margin-top: 20px;
        text-align: center;
    }
    .preview img {
        max-width: 100%;
    }
</style>
</head>
<body>
<div class="container">
    <h1 class="text-2xl font-bold mb-4">文章封面图生成工具</h1>
    <div class="form-group">
        <label for="title">标题:</label>
        <textarea id="title" class="w-full p-2 border border-gray-300 rounded" rows="3"> 
   </textarea>
    </div>
    <div class="form-group">
        <label for="author">作者昵称:</label>
        <input type="text" id="author" class="w-full p-2 border border-gray-300 rounded">
    </div>
    <div class="form-group">
        <label for="icon">图标:</label>
        <select id="icon" class="w-full p-2 border border-gray-300 rounded">
            <option value="">无</option>
            <option value="icon1">图标1</option>
            <option value="icon2">图标2</option>
            <option value="icon3">图标3</option>
        </select>
    </div>
    <div class="form-group">
        <label for="background">背景图:</label>
        <input type="file" id="background" accept="image/*" class="w-full p-2 border border-gray-300 rounded">
    </div>
    <div class="form-group">
        <label for="ratio">封面比例:</label>
        <select id="ratio" class="w-full p-2 border border-gray-300 rounded">
            <option value="1:1">1:1</option>
            <option value="16:9">16:9</option>
            <option value="4:3">4:3</option>
        </select>
    </div>
    <div class="form-group">
        <label for="opacity">背景透明度:</label>
        <input type="range" id="opacity" min="0" max="1" step="0.1" value="1" class="w-full">
    </div>
    <div class="preview">
        <img id="previewImage" src="" alt="封面预览">
    </div>
    <button id="downloadButton" class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">下载封面图</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js">    </script>
<script>
    // 获取页面元素
    const titleInput = document.getElementById('title');
    const authorInput = document.getElementById('author');
    const iconSelect = document.getElementById('icon');
    const backgroundInput = document.getElementById('background');
    const ratioSelect = document.getElementById('ratio');
    const opacityRange = document.getElementById('opacity');
    const previewImage = document.getElementById('previewImage');
    const downloadButton = document.getElementById('downloadButton');

    // 监听输入变化
    titleInput.addEventListener('input', generatePreview);
    authorInput.addEventListener('input', generatePreview);
    iconSelect.addEventListener('change', generatePreview);
    backgroundInput.addEventListener('change', generatePreview);
    ratioSelect.addEventListener('change', generatePreview);
    opacityRange.addEventListener('input', generatePreview);

    // 生成封面预览
    function generatePreview() {
        const title = titleInput.value;
        const author = authorInput.value;
        const icon = iconSelect.value;
        const background = backgroundInput.files[0];
        const ratio = ratioSelect.value;
        const opacity = opacityRange.value;

        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 设置画布尺寸
        const [width, height] = ratio.split(':');
        canvas.width = width * 100;
        canvas.height = height * 100;

        // 绘制背景图
        if (background) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = new Image();
                img.onload = function() {
                    ctx.globalAlpha = opacity;
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    drawText();
                }
                img.src = e.target.result;
            }
            reader.readAsDataURL(background);
        } else {
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            drawText();
        }

        // 绘制文本
        function drawText() {
            ctx.globalAlpha = 1;
            ctx.fillStyle = '#000000';
            ctx.font = 'bold 24px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            const lines = title.split('\n');
            const lineHeight = 30;
            const startY = (canvas.height - lineHeight * lines.length) ;

            lines.forEach((line, index) => {
                ctx.fillText(line, canvas.width , startY + lineHeight * index);
            });

            if (author) {
                ctx.font = '10px Arial';
                ctx.fillText(author, canvas.width , canvas.height - 30);
            }

            if (icon) {
                const iconImg = new Image();
                iconImg.onload = function() {
                    const size = 40;
                    const x = canvas.width - size - 20;
                    const y = 20;
                    ctx.drawImage(iconImg, x, y, size, size);
                    updatePreview();
                }
                iconImg.src = `icons/${icon}.png`;
            } else {
                updatePreview();
            }
        }

        // 更新预览图
        function updatePreview() {
            previewImage.src = canvas.toDataURL();
        }
    }

    // 下载封面图
    downloadButton.addEventListener('click', function() {
        const link = document.createElement('a');
        link.href = previewImage.src;
        link.download = 'cover.png';
        link.click();
    });
</script>
</body>
</html>

猜你喜欢
评论 (0)
隐私评论