Canvas像素级图像替换的性能优化指南

// 假设主Canvas的ID为 'mainCanvas'
var C = document.getElementById('mainCanvas');
var Cx = C.getContext('2d');

// 启用图像平滑，提升视觉质量
Cx.imageSmoothingEnabled = true;
Cx.imageSmoothingQuality = 'high';

// 加载主背景图像
var mainImage = new Image();
mainImage.src = 'path/to/your/background.jpg'; // 替换为你的背景图路径

mainImage.onload = function() {
    C.width = this.naturalWidth;
    C.height = this.naturalHeight;
    Cx.drawImage(this, 0, 0, C.width, C.height);

    // 背景图加载完成后，开始处理替换逻辑
    // Load_Marble_Tile('path/to/your/marble_tile.jpg');
};

/**
 * 替换主Canvas上特定颜色区域的像素。
 * @param {string} MarblePath - 大理石纹理图像的路径。
 * @param {number} targetR - 目标颜色的红色分量。
 * @param {number} targetG - 目标颜色的绿色分量。
 * @param {number} targetB - 目标颜色的蓝色分量。
 * @param {number} tolerance - 颜色匹配的容差范围。
 */
function Load_Marble_Tile(MarblePath, targetR, targetG, targetB, tolerance) {
    // 获取主Canvas的上下文和像素数据
    var C = document.getElementById('mainCanvas'); // 确保这里获取到的是正确的Canvas元素
    var Cx = C.getContext('2d');
    var Data1 = Cx.getImageData(0, 0, C.width, C.height);
    var D1 = Data1.data; // 主Canvas的像素数据数组
    var L = D1.length;   // 像素数据数组长度

    // 创建一个离屏Canvas用于加载大理石纹理
    var V = document.createElement('canvas');
    var Vx = V.getContext('2d');
    Vx.imageSmoothingEnabled = true;
    Vx.imageSmoothingQuality = 'high';

    // 加载大理石纹理图像
    var I = new Image();
    I.crossOrigin = 'anonymous'; // 解决跨域图像的Canvas污染问题
    I.src = MarblePath;

    I.onload = function() {
        // 设置离屏Canvas的尺寸为纹理图像的原始尺寸
        V.width = this.naturalWidth;
        V.height = this.naturalHeight;
        // 将纹理图像绘制到离屏Canvas上
        Vx.drawImage(this, 0, 0, V.width, V.height);

        // 获取离屏Canvas（大理石纹理）的像素数据
        var Data2 = Vx.getImageData(0, 0, V.width, V.height);
        var D2 = Data2.data; // 大理石纹理的像素数据数组
        var D2_length = D2.length; // 纹理像素数据数组长度

        var n = 0; // 用于循环遍历大理石纹理像素的索引

        // 遍历主Canvas的像素数据
        for (var i = 0; i < L; i += 4) {
            // 检查当前像素是否与目标颜色匹配（带容差）
            if (
                (D1[i] > targetR - tolerance) && (D1[i] <= targetR + tolerance) &&
                (D1[i + 1] > targetG - tolerance) && (D1[i + 1] < targetG + tolerance) &&
                (D1[i + 2] > targetB - tolerance) && (D1[i + 2] < targetB + tolerance)
            ) {
                // 如果匹配，则将大理石纹理的像素数据复制到主Canvas的当前像素位置
                D1[i + 0] = D2[n + 0]; // R
                D1[i + 1] = D2[n + 1]; // G
                D1[i + 2] = D2[n + 2]; // B
                D1[i + 3] = D2[n + 3]; // A

                // 移动到大理石纹理的下一个像素，实现纹理平铺效果
                n = (n + 4) % D2_length; // 确保 n 在 D2_length 范围内循环
            }
        }

        // 所有像素修改完成后，一次性将修改后的数据回写到主Canvas
        Cx.putImageData(Data1, 0, 0);
    };
}

// 示例调用：将主Canvas上颜色接近 (220, 170, 170) 的区域替换为大理石纹理
// 假设目标红色区域的RGB大致范围是 (217-225, 167-173, 165-175)
// 我们可以取中心值 (221, 170, 170) 并设置一个容差
mainImage.onload = function() {
    C.width = this.naturalWidth;
    C.height = this.naturalHeight;
    Cx.drawImage(this, 0, 0, C.width, C.height);

    // 假设目标颜色为 (221, 170, 170)，容差为 10
    Load_Marble_Tile('path/to/your/marble_tile.jpg', 221, 170, 170, 10); 
};