因为最近在维护一个图片站，但是转载图片的时候会面临有很多的样式会被转载过来，所以我直接通过我自己编写的图像代码生成器直接处理复制下来的图片代码，以下是前端样式：
效果就是输入图片链接或者包含图片链接的代码时，系统会自动识别图片链接并生成img标签的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;// 判断用户是否输入的是有效的HTMLvar 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 lay-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 lay-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>
整理不易，还望支持！
本帖首发于喜欢网络第888帖
2024-09-12 22:34:48
注册小轻论坛账号
获取更多实用资源及技术
欢迎后台留言求助小轻论坛
欢迎体验小轻密语小程序
▼
●点击文字，了解更多●
「 关注这个号的你可以说是很优秀了 」
▼
