Greasy Fork 镜像站

利用google api生成当前页面二维码

Add a "Generate QR Code" button to mp.weixin.qq.com
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         利用google api生成当前页面二维码
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Add a "Generate QR Code" button to mp.weixin.qq.com
// @author       Cantan Tam
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let isGeneratingQRCode = false;

    // 创建按钮元素
    const qrCodeButton = document.createElement('div');
    const buttonContent = document.createElement('div');
    buttonContent.textContent = '生成二维码';
    qrCodeButton.appendChild(buttonContent);

    // 设置按钮样式
    qrCodeButton.style.position = 'fixed';
    qrCodeButton.style.top = '10px';
    qrCodeButton.style.right = '20.5px';
    qrCodeButton.style.width = '94px';
    qrCodeButton.style.height = '30px';
    qrCodeButton.style.borderRadius = '5px';
    qrCodeButton.style.backgroundColor = '#f2f2f2ff';
    qrCodeButton.style.color = '#ccccccff';
    qrCodeButton.style.textAlign = 'center';
    qrCodeButton.style.fontSize = '14px';
    qrCodeButton.style.cursor = 'pointer';
    qrCodeButton.style.userSelect = 'none';
    qrCodeButton.style.zIndex = '9999';
    qrCodeButton.style.lineHeight = '32px'; // 垂直居中

    // 按钮的悬停效果
    qrCodeButton.addEventListener('mouseover', function() {
        if (isGeneratingQRCode) {
            qrCodeButton.style.backgroundColor = '#ff9955ff';
            buttonContent.style.color = '#ffffffff';
        } else {
            qrCodeButton.style.backgroundColor = '#27ae60ff';
            buttonContent.style.color = '#ffffffff';
        }
    });

    qrCodeButton.addEventListener('mouseout', function() {
        if (isGeneratingQRCode) {
            qrCodeButton.style.backgroundColor = '#ff9955ff';
            buttonContent.style.color = '#ffffffff';
        } else {
            qrCodeButton.style.backgroundColor = '#f2f2f2ff';
            buttonContent.style.color = '#ccccccff';
        }
    });

    // 按钮点击事件
    qrCodeButton.addEventListener('click', function() {
        if (!isGeneratingQRCode) {
            isGeneratingQRCode = true;
            buttonContent.textContent = '下载二维码';
            qrCodeButton.style.backgroundColor = '#ff9955ff';
            buttonContent.style.color = '#ffffffff';
            generateQRCode();
        } else {
            downloadQRCode();
        }
    });

    // 生成二维码并插入到页面
    function generateQRCode() {
        const url = window.location.href;
        const qrCodeUrl = `https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=${encodeURIComponent(url)}&chld=L|0`; // 设置白边为0

        // 清除页面上生成的125x125二维码图像
        clearGeneratedQRCode();

        const qrCodeImage = document.createElement('img');
        qrCodeImage.src = qrCodeUrl;
        qrCodeImage.style.position = 'fixed';
        qrCodeImage.style.top = '45px'; // 20px + 30px (按钮高度)
        qrCodeImage.style.right = '5px';
        qrCodeImage.style.width = '125px';
        qrCodeImage.style.height = '125px';

        document.body.appendChild(qrCodeImage);
    }

    // 下载二维码
    function downloadQRCode() {
        const url = window.location.href;
        const qrCodeUrl = `https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=${encodeURIComponent(url)}&chld=L|0`; // 设置白边为0

        // 获取前网页的<title></title>内容，并将其用作文件名
        const pageTitle = document.title || 'QRCode';

        fetch(qrCodeUrl)
            .then(response => response.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `${pageTitle}.png`;
                a.style.display = 'none'; // 隐藏下载链接
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                a.remove();
            });

        // 延迟0.5秒后更新按钮文字、颜色
        setTimeout(function() {
            isGeneratingQRCode = false;
            buttonContent.textContent = '下载已开始';
            qrCodeButton.style.backgroundColor = '#f2f2f2ff';
            buttonContent.style.color = '#666666ff';
        }, 500);

        // 清除页面上生成的125x125二维码图像
        clearGeneratedQRCode();
    }

    // 清除页面上生成的125x125二维码图像
    function clearGeneratedQRCode() {
        const qrCodeImages = document.querySelectorAll('img[src*="chart.googleapis.com"]');
        qrCodeImages.forEach(img => {
            img.remove();
        });
    }

    // 将按钮添加到页面
    document.body.appendChild(qrCodeButton);
})();
扫码关注【爱吃馍】
