code – 第 8 页 – 万雪飞扬

【HTML】iframe小工具——提取嵌入链接并重设参数

一般类似YouTube、Bilibili的分享链接，都设置了各自网站的相应参数，为了快速提取其src内容并自定义部分参数，可以使用该小工具进行快速设置。

跳转到小工具页面

操作区

标题:

宽:

单位:

高:

单位:

允许全屏:

Referrer Policy:

加载方式:

自动播放:

加密媒体:

画中画:

Web分享:

预览展示区

查看代码

<style>
        textarea, input, select {
            width: 100%;
            margin-bottom: 10px;
            padding: 5px;
            font-size: 14px;
        }
        button {
            font-size: 16px;
            margin-bottom: 10px;
            padding: 5px 10px;
        }
        .link-container {
            margin-top: 10px;
        }
        .link-item {
            margin-bottom: 5px;
        }
        .iframe-preview {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            background: #f9f9f9;
        }
        .iframe-preview pre {
            font-size: 14px;
            background: #e9e9e9;
            padding: 10px;
            border-radius: 5px;
        }
        .row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .col {
            flex: 1 1 20%;
        }
        .col input, .col select {
            width: 100%;
        }
        .unit-select {
            width: 10px; /*缩小单位选择框宽度*/
        }
        .empty-option {
            font-size: 14px;
        }
        #iframePreviewContainer {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 输入框 -->
    <textarea id="iframeInput" placeholder="在此输入多个 iframe 代码"></textarea>
    <button id="extractButton">提取链接</button>

    <!-- 链接展示区 -->
    <div id="result" class="link-container"></div>

    <!-- 单个链接操作区 -->
    <h2>操作区</h2>
    <input id="selectedLink" type="text" placeholder="点击复制按钮后，链接将填入此处" readonly>
    
    <!-- iframe 属性设置 -->
    <div class="row">
        <div class="col">
            <label for="iframeTitle">标题:</label>
            <input id="iframeTitle" type="text" placeholder="请输入 iframe 标题">
        </div>
        <div class="col">
            <label for="iframeWidth">宽度:</label>
            <input id="iframeWidth" type="text" placeholder="例如 560">
        </div>
        <div class="col">
            <label for="iframeWidthUnit">宽度单位:</label>
            <select id="iframeWidthUnit" class="unit-select">
                <option value="px">px</option>
                <option value="%">%</option>
                <option value="vw">vw</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeHeight">高度:</label>
            <input id="iframeHeight" type="text" placeholder="例如 315">
        </div>
        <div class="col">
            <label for="iframeHeightUnit">高度单位:</label>
            <select id="iframeHeightUnit" class="unit-select">
                <option value="px">px</option>
                <option value="%">%</option>
                <option value="vh">vh</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <label for="iframeFullscreen">允许全屏:</label>
            <select id="iframeFullscreen">
                <option value="allowfullscreen">是</option>
                <option value="">否</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeReferrer">Referrer Policy:</label>
            <select id="iframeReferrer">
                <option value="no-referrer">不发送</option>
                <option value="no-referrer-when-downgrade">仅同源</option>
                <option value="origin">仅发送源</option>
                <option value="origin-when-cross-origin">跨源时发送源</option>
                <option value="same-origin">同源发送完整路径</option>
                <option value="strict-origin">严格同源发送源</option>
                <option value="strict-origin-when-cross-origin">默认（严格同源）</option>
                <option value="unsafe-url">发送完整 URL</option>
                <option value="">保持空值</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeLoading">加载方式:</label>
            <select id="iframeLoading">
                <option value="eager">立即加载</option>
                <option value="lazy">懒加载</option>
                <option value="">保持空值</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeAutoplay">自动播放:</label>
            <select id="iframeAutoplay">
                <option value="autoplay">是</option>
                <option value="">否</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <label for="iframeEncrypted">加密媒体:</label>
            <select id="iframeEncrypted">
                <option value="encrypted-media">是</option>
                <option value="">否</option>
            </select>
        </div>
        <div class="col">
            <label for="iframePictureInPicture">画中画:</label>
            <select id="iframePictureInPicture">
                <option value="picture-in-picture">是</option>
                <option value="">否</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeWebShare">Web分享:</label>
            <select id="iframeWebShare">
                <option value="web-share">是</option>
                <option value="">否</option>
            </select>
        </div>
    </div>

    <!-- 生成 iframe 和复制按钮 -->
    <div>
        <button id="generateIframeButton">生成 iframe 嵌入代码</button>
        <button id="copyIframeButton">复制生成代码</button>
    </div>

    <!-- iframe 代码展示 -->
    <div id="generatedIframe" class="iframe-preview">
        <textarea id="iframeCodeText" readonly rows="10"></textarea>
    </div>

    <!-- iframe 预览展示区 -->
    <div id="iframePreviewContainer" class="iframe-preview">
        <h2>预览展示区</h2>
        <iframe id="iframePreview" src="" width="560" height="315" style="border: none;"></iframe>
    </div>

    <script>
        // 缓存常用的 DOM 元素
        const iframeWidthInput = document.getElementById('iframeWidth');
        const iframeHeightInput = document.getElementById('iframeHeight');
        const iframeWidthUnit = document.getElementById('iframeWidthUnit');
        const iframeHeightUnit = document.getElementById('iframeHeightUnit');
        const selectedLinkInput = document.getElementById('selectedLink');
        const iframeFullscreenSelect = document.getElementById('iframeFullscreen');
        const iframeReferrerSelect = document.getElementById('iframeReferrer');
        const iframeLoadingSelect = document.getElementById('iframeLoading');
        const iframeAutoplaySelect = document.getElementById('iframeAutoplay');
        const iframeEncryptedSelect = document.getElementById('iframeEncrypted');
        const iframePictureInPictureSelect = document.getElementById('iframePictureInPicture');
        const iframeWebShareSelect = document.getElementById('iframeWebShare');
        const iframeTitleInput = document.getElementById('iframeTitle');
        const generateIframeButton = document.getElementById('generateIframeButton');
        const copyIframeButton = document.getElementById('copyIframeButton');
        const iframeCodeText = document.getElementById('iframeCodeText');
        const iframePreview = document.getElementById('iframePreview');
        const resultDiv = document.getElementById('result');

        // 提取 iframe src 链接
        function extractSrc() {
            const input = document.getElementById('iframeInput').value;
            resultDiv.innerHTML = ''; // 清空之前的结果

            const srcMatches = [...input.matchAll(/src="([^"]+)"/g)];
            if (srcMatches.length > 0) {
                const srcLinks = srcMatches.map(match => match[1]);

                srcLinks.forEach(link => {
                    const linkItem = createLinkItem(link);
                    resultDiv.appendChild(linkItem);
                });
            } else {
                resultDiv.textContent = '没有找到有效的 iframe 链接';
            }
        }

        // 创建链接项
        function createLinkItem(link) {
            const div = document.createElement('div');
            div.classList.add('link-item');

            const textNode = document.createTextNode(link);
            const copyButton = document.createElement('button');
            copyButton.textContent = '复制';
            copyButton.onclick = function() {
                selectedLinkInput.value = link;
            };

            div.appendChild(textNode);
            div.appendChild(copyButton);
            return div;
        }

        // 生成 iframe 代码
        function generateIframeCode() {
            const width = iframeWidthInput.value;
            const height = iframeHeightInput.value;
            const widthUnit = iframeWidthUnit.value;
            const heightUnit = iframeHeightUnit.value;
            const title = iframeTitleInput.value;
            const src = selectedLinkInput.value;
            const fullscreen = iframeFullscreenSelect.value;
            const referrer = iframeReferrerSelect.value;
            const loading = iframeLoadingSelect.value;
            const autoplay = iframeAutoplaySelect.value;
            const encrypted = iframeEncryptedSelect.value;
            const pictureInPicture = iframePictureInPictureSelect.value;
            const webShare = iframeWebShareSelect.value;

            let iframeCode = `<iframe src="${src}"`;

            if (title) {
                iframeCode += ` title="${title}"`;
            }
            iframeCode += ` width="${width}${widthUnit}" height="${height}${heightUnit}"`;

            if (fullscreen) {
                iframeCode += ` ${fullscreen}`;
            }

            if (referrer) {
                iframeCode += ` referrerpolicy="${referrer}"`;
            }

            if (loading) {
                iframeCode += ` loading="${loading}"`;
            }

            if (autoplay) {
                iframeCode += ` ${autoplay}`;
            }

            if (encrypted) {
                iframeCode += ` ${encrypted}`;
            }

            if (pictureInPicture) {
                iframeCode += ` ${pictureInPicture}`;
            }

            if (webShare) {
                iframeCode += ` ${webShare}`;
            }

            iframeCode += '></iframe>';

            iframeCodeText.value = iframeCode;
            iframePreview.src = src;
        }

        // 复制代码到剪贴板
        function copyIframeCode() {
            iframeCodeText.select();
            document.execCommand('copy');
        }

        // 事件监听
        document.getElementById('extractButton').addEventListener('click', extractSrc);
        generateIframeButton.addEventListener('click', generateIframeCode);
        copyIframeButton.addEventListener('click', copyIframeCode);
    </script>
</body>

2024年11月27日

【Python】裁切图片为指定画幅比例

该工具是在截取MTV的画面时产生的需求，一些4:3画幅的视频制作时候加入了黑边，成了16:9视频，因此想截图出原本4:3的画面，一方面可以进剪辑软件进行直接裁剪，也可以在原视频进行导出后操作，考虑到二压费时费力，因此选择对截取的图片进行批处理。

import os
import random
import string
from tkinter import Tk, filedialog, Button, Label, messagebox
from PIL import Image


def random_filename(extension):
    """生成随机文件名"""
    chars = string.ascii_letters + string.digits
    return ''.join(random.choices(chars, k=8)) + f".{extension}"


def crop_to_aspect(image, target_ratio=4/3):
    """裁剪图像宽边以符合指定宽高比"""
    width, height = image.size
    current_ratio = width / height

    if current_ratio > target_ratio:  # 如果宽高比大于目标比例，宽度过大
        new_width = int(height * target_ratio)  # 计算符合比例的新宽度
        left = (width - new_width) // 2  # 左侧裁剪量
        right = left + new_width  # 右侧裁剪量
        image = image.crop((left, 0, right, height))  # 裁剪左右宽边

    return image


def process_images():
    """处理图片并保存结果"""
    input_files = filedialog.askopenfilenames(
        title="选择图片文件",
        filetypes=[("Image Files", "*.jpg *.png")]
    )
    if not input_files:
        return

    output_dir = filedialog.askdirectory(title="选择输出文件夹")
    if not output_dir:
        return

    for file_path in input_files:
        try:
            with Image.open(file_path) as img:
                # 转换为符合比例的图片
                processed_img = crop_to_aspect(img)
                # 保存文件
                ext = file_path.split('.')[-1]
                output_path = os.path.join(output_dir, random_filename(ext))
                processed_img.save(output_path)
        except Exception as e:
            messagebox.showerror("错误", f"处理文件 {file_path} 时出错: {e}")
            continue

    messagebox.showinfo("完成", "图片批量处理完成！")


def create_gui():
    """创建GUI"""
    root = Tk()
    root.title("图片批量处理工具")
    root.geometry("400x200")

    Label(root, text="批量处理图片 - 保持高度裁切宽边为4:3比例").pack(pady=20)
    Button(root, text="选择图片并处理", command=process_images).pack(pady=10)
    Button(root, text="退出", command=root.quit).pack(pady=10)

    root.mainloop()


if __name__ == "__main__":
    create_gui()

2024年11月26日

【HTML】输入Pixiv ID跳转对应画师主页

Pixiv的应用内部居然没这个功能，不科学，非常基础的功能。

收录进了小工具页面。👉点击使用小工具

<body>
    <h1>Pixiv用户跳转</h1>
    <input id="input-id" type="text" placeholder="请输入数字ID" oninput="validateInput()" />
    <div>
        <button onclick="generateLink()">生成链接</button>
        <button onclick="openLink()">跳转</button>
    </div>
    <div id="output"></div>

    <script>
        function validateInput() {
            const input = document.getElementById('input-id');
            input.value = input.value.replace(/\D/g, ''); // 只保留数字
        }

        function generateLink() {
            const input = document.getElementById('input-id').value.trim();
            const output = document.getElementById('output');
            if (input === '') {
                output.innerHTML = '<p style="color: red;">请输入有效的数字ID！</p>';
                return;
            }
            const link = `https://www.pixiv.net/member.php?id=${input}`;
            output.innerHTML = `<a href="${link}" target="_blank">点击跳转到 Pixiv 用户页面</a>`;
        }

        function openLink() {
            const input = document.getElementById('input-id').value.trim();
            if (input === '') {
                alert('您还没有输入ID~');
                return;
            }
            const link = `https://www.pixiv.net/member.php?id=${input}`;
            window.open(link, '_blank');
        }
    </script>
</body>

2024年11月24日

标签： code

【HTML】iframe小工具——提取嵌入链接并重设参数

【Python】裁切图片为指定画幅比例

【HTML】输入Pixiv ID跳转对应画师主页