Decklog WS Deck Output

try to take over the world!
当前为 2023-03-29 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Decklog WS Deck Output
// @namespace    http://tampermonkey.net/
// @version      2.0.0
// @description  try to take over the world!
// @author       Chatgpt 4.0
// @match        https://decklog.bushiroad.com/view/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

async function downloadImage(url) {
    return new Promise((resolve, reject) => {
        GM_xmlhttpRequest({
            method: "GET",
            url: url,
            responseType: "blob",
            onload: function (response) {
                resolve(response.response);
            },
            onerror: function (err) {
                reject(err);
            }
        });
    });
}

async function loadImage(blob) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = URL.createObjectURL(blob);
        img.onload = () => resolve(img);
        img.onerror = (err) => reject(err);
    });
}

async function processImage(image, num) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    if (image.width > image.height) {
        canvas.width = 1400;
        canvas.height = 1000;
        ctx.rotate(Math.PI / 2);
        ctx.drawImage(image, 0, -1400, 1000, 1400);
    } else {
        canvas.width = 1000;
        canvas.height = 1400;
        ctx.drawImage(image, 0, 0, 1000, 1400);
    }

    const processedImages = [];
    for (let i = 0; i < num; i++) {
        processedImages.push(canvas.toDataURL());
    }

    return processedImages;
}


async function createDeckImage(images) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = 10000;
    canvas.height = 7000;

    let xPos = 0;
    let yPos = 0;

    const imgPromises = images.map(async (image) => {
        return new Promise(async (resolve) => {
            const img = new Image();
            img.src = image;
            img.onload = () => {
                ctx.drawImage(img, xPos, yPos, 1000, 1400);
                xPos += 1000;

                if (xPos >= 10000) {
                    xPos = 0;
                    yPos += 1400;
                }
                resolve();
            };
        });
    });

    await Promise.all(imgPromises);

    return new Promise((resolve) => {
        canvas.toBlob((blob) => {
            resolve(blob);
        }, 'image/jpeg');
    });
}

async function ButtonClickAction(zEvent) {
    const deckList = [];
    let deckImages = [];

    try {
        var list = document.querySelectorAll('.card-item.col-xl-2.col-lg-3.col-sm-4.col-6');
    } catch (e) {
        console.error(e.message);
    }

    for (let item of list) {
        const imageUrl = item.getElementsByTagName("img")[0].getAttribute("data-src");
        const num = parseInt(item.getElementsByClassName("num")[0].innerHTML);
        deckList.push({ imageUrl, num });
    }

    for (const item of deckList) {
        const imageBlob = await downloadImage(item.imageUrl);
        const image = await loadImage(imageBlob);
        const processedImages = await processImage(image, item.num);
        deckImages = deckImages.concat(processedImages);
    }

    const deckBlob = await createDeckImage(deckImages);
    const deckFileName = window.location.pathname.split('/').pop() + '.jpg';

    const a = document.createElement('a');
    a.href = URL.createObjectURL(deckBlob);
    a.download = deckFileName;
    a.click();
    URL.revokeObjectURL(a.href);
}

window.onload = function () {
    var zNode = document.createElement('div');
    zNode.innerHTML = '<button id="myButton" type="button">'
        + 'Create Deck Image</button>'
        ;
    zNode.setAttribute('id', 'myContainer');
    document.body.appendChild(zNode);
    document.getElementById("myButton").addEventListener(
        "click", ButtonClickAction, false
    );
};