节点 | GM 单色()函数

GM 单色() 函数是一个强大的图像处理函数，可在 Greasemonkey 脚本和用户脚本中使用。该函数可以方便地将图像转换为单色模式，使图像只有黑白两种颜色。在本文中，我们将介绍如何使用该函数和一些有用的技巧。

函数签名

语法：GM单色(imageData, 反色)

GM单色() 函数有两个参数：

• imageData - ImageData 对象或 Canvas 对象。
• 反色 - Boolean 值，确定是否反转单色处理后的颜色，false 时黑色变为白色，白色变为黑色，true 时相反。

使用示例

以下是一个简单的使用示例：

// 选择图片
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = document.createElement("img");
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // 单色处理图像
    imageData = GM单色(imageData, false);
    ctx.putImageData(imageData, 0, 0);
    document.body.innerHTML += canvas.outerHTML;
};
img.src = "https://example.com/image.jpg";

通过上述代码，我们可以将图片处理为仅包含黑白两种颜色的单色图像，并添加到网页中展示。

技巧与应用

定义为 Greasemonkey 脚本函数

如果您想要在多个 Greasemonkey 脚本中使用 GM 单色() 函数，您可以将其定义为公用函数，以避免重复编写代码。

以定义为 Greasemonkey 脚本函数的方式使用：

// 定义为公用函数
function GM单色(imageData, 反色) {
    // 函数内容
}

// 在脚本中调用
GM单色(imageData, false);

接受选择器作为参数

如果您想要单色处理并非直接在页面上展示的图片，可以通过传递选择器作为参数的方式获取图像并进行处理。

如下代码示例，为当前页面中所有 class 为 "my-image" 的图片添加单色效果：

// 处理所有 class 为 "my-image" 的图片
[].forEach.call(document.querySelectorAll(".my-image"), function (img) {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    imageData = GM单色(imageData, false);
    ctx.putImageData(imageData, 0, 0);
    img.src = canvas.toDataURL();
});

过滤浏览器默认打印背景

如果您想在页眉页脚等位置添加单色处理后的图像，但又不想在打印时显示默认的页面背景图片，您可以使用 CSS 控制背景，并使用打印样式表过滤掉浏览器默认打印背景。

例如：

.my-image {
    background-color: white;
    -webkit-print-color-adjust: exact;
}

@media print {
    body {
        background-image: none;
    }
}

纠正图片显示

如果您将单色处理后的图像显示在背景圆形的元素中时，可能会出现图像显示不充满圆形的情况。您可以通过调节图像的透明度来解决这个问题。

以 50% 透明度为例：

.round-image {
    background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(255,255,255,1) 60%), #fff;
}

.image-single-color {
    opacity: 0.5;
}

图像优化

在单色处理图像时，如果能够理解每个像素点的颜色值，可以进行一些优化，减少图像数据量。

例如，如下代码将黑白图像压缩成一个二进制字符串：

var result = "";
for (var i = 0; i < imageData.data.length; i += 4) {
    var gray = 0.2126 * imageData.data[i] + 0.7152 * imageData.data[i + 1] + 0.0722 * imageData.data[i + 2];
    result += gray > 128 ? "1" : "0";
}
result = atob(result);

通过该方式，可以将图像数据量减少至原来的四分之一。

总结

GM 单色() 函数是一个方便且有用的图像处理函数，可用于许多图像操作。通过掌握该函数及其技巧和应用，您可以更好地处理和展示图像。