一个页面将图片链接直接转换带统一描述的img标签

原创

半夜喝可乐

发布于 2024-09-12 22:47:59

770

发布于 2024-09-12 22:47:59

文章被收录于专栏：小轻论坛

因为最近在维护一个图片站，但是转载图片的时候会面临有很多的样式会被转载过来，所以我直接通过我自己编写的图像代码生成器直接处理复制下来的图片代码，以下是前端样式：

效果就是输入图片链接或者包含图片链接的代码时，系统会自动识别图片链接并生成img标签的html代码。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像代码生成器</title>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f4;
        color: #333;
    }
    .container {
        max-width: 960px;
        margin: 0 auto;
        background: #fff;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    textarea, input[type="text"] {
        width: 100%;
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .button {
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        color: #fff;
        background-color: #007bff;
        margin-right: 10px;
    }
    .button:hover {
        background-color: #0056b3;
    }
    .output-container {
        background-color: #f9f9f9;
        padding: 10px;
        margin-top: 10px;
        border-radius: 4px;
    }
    .copy-button {
        padding: 5px 10px;
        background-color: #5cb85c;
        border: none;
        border-radius: 3px;
        color: white;
        cursor: pointer;
    }
    .copy-button:hover {
        background-color: #4cae4c;
    }
    .copy-message {
        color: #5cb85c;
        display: none;
        margin-top: 10px;
    }
</style>
<script>
function generateImages() {
    var userInput = document.getElementById('userInput').value;
    var altText = document.getElementById('altText').value;

    // 判断用户是否输入的是有效的HTML
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = userInput;
    var isValidHTML = tempDiv.querySelector('img') || userInput.trim() === '';

    if (!isValidHTML) {
        // 如果不是有效的HTML，尝试按行分割图片地址
        var imageUrls = userInput.split('\n');
        var output = '';
        imageUrls.forEach(function(url) {
            url = url.trim();
            if (url) { // 确保不是空行
                output += '<img src="' + url + '" alt="' + altText + '" />\n<br>\n';
            }
        });
    } else {
        // 如果是有效的HTML，按照之前的逻辑处理
        var images = tempDiv.querySelectorAll('img');
        var output = '';
        images.forEach(function(img) {
            var src = img.getAttribute('src');
            output += '<img src="' + src + '" alt="' + altText + '" />\n<br>\n';
        });
    }

    document.getElementById('output').textContent = output;
}

function copyToClipboard() {
    var output = document.getElementById('output');
    var text = output.textContent.trim();
    if (!text) {
        alert('您未输入文本。');
        return;
    }

    var elem = document.createElement('textarea');
    document.body.appendChild(elem);
    elem.value = text;
    elem.select();

    try {
        var successful = document.execCommand('copy');
        if (successful) {
            var copyMessage = document.getElementById('copyMessage');
            copyMessage.style.display = 'block';
            setTimeout(function() {
                copyMessage.style.display = 'none';
            }, 2000);
        } else {
            alert('复制失败，请重试。');
        }
    } catch (err) {
        alert('无法复制文本。');
    }
    document.body.removeChild(elem);
}
</script>
</head>
<body>

<div class="container">
    <h2>图像代码生成器</h2>

    <label for="userInput">输入HTML代码:</label>
    <textarea id="userInput" rows="10"></textarea>

    <label for="altText">统一的alt文本:</label>
    <input type="text" id="altText" value="我喜欢网" />

    <div>
        <button class="button" onclick="generateImages()">生成图片代码</button>
        <button class="button" onclick="copyToClipboard()">复制代码</button>
    </div>

    <div class="output-container">
        <h3>生成的代码:</h3>
        <div id="copyMessage" style="display: none; color: #fff; background-color: #5cb85c; padding: 10px; margin-top: 10px; border-radius: 5px;">代码已复制到剪贴板</div>
        <pre id="output"></pre>
    </div>
</div>
</body>
</html>

这个页面某些逻辑可能还是有些问题，但是处理一些简单的转换还是不成问题的，比如大面积的html也是可以转的。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

图片标签