Greasy Fork

我撰寫了新功能，能夠添加或移除背景圖片，並在添加時處理不符合比例的背景圖片。並修改邏輯為隨機從背景圖片中選一顯示。
// var 背景圖片網址 = "https://i.imgur.com/zF17VkP.jpg";
/* 把背景圖片轉成base64 */
// if (背景圖片網址 == GM_getValue("bac_img_url")) {
// 背景圖片網址 = GM_getValue("bac_base64");
// } else {
// if (背景圖片網址.substr(0, 4).toLowerCase() == "http") {
// toDataURL(背景圖片網址, function (dataUrl) {
// GM_setValue("bac_base64", dataUrl);
// GM_setValue("bac_img_url", 背景圖片網址);
// console.log("深色主題-重新下載圖片");
// });
// }
// }

================================================================

//使用者還沒新增背景的時，需要設定為空陣列，否則會出現錯誤
let bac_img_url_temp = GM_getValue("bac_img_url");
let bac_img_url = Array.isArray(bac_img_url_temp) ? bac_img_url_temp : [];
let bac_base64 = GM_getValue("bac_base64") || [];

if (bac_base64.length !== bac_img_url.length) {
bac_base64 = []; // 重置 bac_base64
bac_img_url.forEach(url => {
toDataURL(url, function(dataUrl) {
adjustImageAspectRatio(dataUrl, 2560, 1440, function(adjustedDataUrl) {
bac_base64.push(adjustedDataUrl);
GM_setValue("bac_base64", bac_base64);
});
});
});
GM_setValue("bac_img_url", bac_img_url);
}

var 背景圖片 = bac_img_url[Math.floor(Math.random() * bac_img_url.length)];
var 背景圖片網址 = bac_base64[bac_img_url.indexOf(背景圖片)];

GM_registerMenuCommand("顯示目前的背景圖片網址", function() {
alert("目前背景圖片: " + 背景圖片 + "\n\n所有背景圖片:\n" + bac_img_url.join("\n"));
});

GM_registerMenuCommand("新增背景圖片", function() {
let newUrl = prompt("輸入網址:");
if (newUrl && bac_img_url.indexOf(newUrl) === -1) {
toDataURL(newUrl, function(dataUrl) {
adjustImageAspectRatio(dataUrl, 2560, 1440, function(adjustedDataUrl) {
bac_img_url.push(newUrl);
bac_base64.push(adjustedDataUrl);
GM_setValue("bac_img_url", bac_img_url);
GM_setValue("bac_base64", bac_base64);
console.log("bac_img_url", GM_getValue("bac_img_url").join("\n"));
console.log("bac_base64", GM_getValue("bac_base64").join("\n\n\n\n"));
alert("成功添加!");
});
});
} else {
alert("網址無效或該圖片重複！");
}
});

GM_registerMenuCommand("刪除背景圖片", function() {
let removeUrl = prompt("輸入目前已有要刪除的圖片網址:");
if (removeUrl && bac_img_url.indexOf(removeUrl) !== -1) {
let index = bac_img_url.indexOf(removeUrl);
bac_img_url.splice(index, 1);
bac_base64.splice(index, 1);
GM_setValue("bac_img_url", bac_img_url);
GM_setValue("bac_base64", bac_base64);
alert("成功刪除！");
} else {
alert("網址無效或該圖片不存在！");
}
});

function adjustImageAspectRatio(dataUrl, targetWidth, targetHeight, callback) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const originalWidth = img.width;
const originalHeight = img.height;

const scaleFactor = targetHeight / originalHeight;
const scaledWidth = originalWidth * scaleFactor;

canvas.width = targetWidth;
canvas.height = targetHeight;

const offsetX = targetWidth - scaledWidth;
context.drawImage(img, offsetX, 0, scaledWidth, targetHeight);

const fillColor = getAverageColor(img, 0, 0, 1, originalHeight);

const paddingWidth = offsetX;
if (paddingWidth > 0) {
context.fillStyle = fillColor;
context.fillRect(0, 0, paddingWidth, targetHeight);
}

callback(canvas.toDataURL());
};
img.src = dataUrl;
}

function getAverageColor(img, x, y, width, height) {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext('2d');
context.drawImage(img, 0, 0);

let totalRed = 0;
let totalGreen = 0;
let totalBlue = 0;
const pixelCount = width * height;

const imageData = context.getImageData(x, y, width, height).data;

for (let i = 0; i < imageData.length; i += 4) {
totalRed += imageData[i];
totalGreen += imageData[i + 1];
totalBlue += imageData[i + 2];
}

const averageRed = Math.round(totalRed / pixelCount);
const averageGreen = Math.round(totalGreen / pixelCount);
const averageBlue = Math.round(totalBlue / pixelCount);

return `rgb(${averageRed}, ${averageGreen}, ${averageBlue})`;
}

附上包含注釋的版本

       // var 背景圖片網址 = "https://i.imgur.com/zF17VkP.jpg";
        /* 把背景圖片轉成base64 */
        // if (背景圖片網址 == GM_getValue("bac_img_url")) {
        //     背景圖片網址 = GM_getValue("bac_base64");
        // } else {
        //     if (背景圖片網址.substr(0, 4).toLowerCase() == "http") {
        //         toDataURL(背景圖片網址, function (dataUrl) {
        //             GM_setValue("bac_base64", dataUrl);
        //             GM_setValue("bac_img_url", 背景圖片網址);
        //             console.log("深色主題-重新下載圖片");
        //         });
        //     }
        // }
        //以上為原方法
        //使用者還沒新增背景的時，需要設定為空陣列，否則會出現錯誤
        let bac_img_url_temp = GM_getValue("bac_img_url");
        let bac_img_url = Array.isArray(bac_img_url_temp) ? bac_img_url_temp : [];
        let bac_base64 = GM_getValue("bac_base64") || [];
        //增刪圖片網址時更新base64
        if (bac_base64.length !== bac_img_url.length) {
            bac_base64 = [];
            bac_img_url.forEach(url => {
                toDataURL(url, function(dataUrl) {
                    adjustImageAspectRatio(dataUrl, 2560, 1440, function(adjustedDataUrl) {
                        bac_base64.push(adjustedDataUrl);
                        GM_setValue("bac_base64", bac_base64);
                    });
                });
            });
            GM_setValue("bac_img_url", bac_img_url);
        }
        //隨機取
        var 背景圖片 = bac_img_url[Math.floor(Math.random() * bac_img_url.length)];
        var 背景圖片網址 = bac_base64[bac_img_url.indexOf(背景圖片)];
        //選單功能
        GM_registerMenuCommand("顯示目前的背景圖片網址", function() {
            alert("目前背景圖片: " + 背景圖片 + "\n\n所有背景圖片:\n" + bac_img_url.join("\n"));
        });
        GM_registerMenuCommand("新增背景圖片", function() {
            let newUrl = prompt("輸入網址:");
            if (newUrl && bac_img_url.indexOf(newUrl) === -1) {
                toDataURL(newUrl, function(dataUrl) {
                    adjustImageAspectRatio(dataUrl, 2560, 1440, function(adjustedDataUrl) {
                        bac_img_url.push(newUrl);
                        bac_base64.push(adjustedDataUrl);
                        GM_setValue("bac_img_url", bac_img_url);
                        GM_setValue("bac_base64", bac_base64);
                        console.log("bac_img_url", GM_getValue("bac_img_url").join("\n"));
                        console.log("bac_base64", GM_getValue("bac_base64").join("\n\n\n\n"));
                        alert("成功添加!");
                    });
                });
            } else {
                alert("網址無效或該圖片重複！");
            }
        });
        GM_registerMenuCommand("刪除背景圖片", function() {
            let removeUrl = prompt("輸入目前已有要刪除的圖片網址:");
            if (removeUrl && bac_img_url.indexOf(removeUrl) !== -1) {
                let index = bac_img_url.indexOf(removeUrl);
                bac_img_url.splice(index, 1);
                bac_base64.splice(index, 1);
                GM_setValue("bac_img_url", bac_img_url);
                GM_setValue("bac_base64", bac_base64);
                alert("成功刪除！");
            } else {
                alert("網址無效或該圖片不存在！");
            }
        });
        // 調整圖片長寬比例並填補圖片左側
        function adjustImageAspectRatio(dataUrl, targetWidth, targetHeight, callback) {
            const img = new Image();
            img.onload = function() {
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                const originalWidth = img.width;
                const originalHeight = img.height;

                const scaleFactor = targetHeight / originalHeight;
                const scaledWidth = originalWidth * scaleFactor;

                canvas.width = targetWidth;
                canvas.height = targetHeight;

                const offsetX = targetWidth - scaledWidth;
                context.drawImage(img, offsetX, 0, scaledWidth, targetHeight);
                //抓取圖片邊緣平均顏色
                const fillColor = getAverageColor(img, 0, 0, 1, originalHeight);

                const paddingWidth = offsetX;
                if (paddingWidth > 0) {
                    context.fillStyle = fillColor;
                    context.fillRect(0, 0, paddingWidth, targetHeight);
                }

                callback(canvas.toDataURL());
            };
            img.src = dataUrl;
        }

        function getAverageColor(img, x, y, width, height) {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const context = canvas.getContext('2d');
            context.drawImage(img, 0, 0);

            let totalRed = 0;
            let totalGreen = 0;
            let totalBlue = 0;
            const pixelCount = width * height;

            const imageData = context.getImageData(x, y, width, height).data;

            for (let i = 0; i < imageData.length; i += 4) {
                totalRed += imageData[i];
                totalGreen += imageData[i + 1];
                totalBlue += imageData[i + 2];
            }

            const averageRed = Math.round(totalRed / pixelCount);
            const averageGreen = Math.round(totalGreen / pixelCount);
            const averageBlue = Math.round(totalBlue / pixelCount);

            return `rgb(${averageRed}, ${averageGreen}, ${averageBlue})`;
    }