如何在函数间共享Canvas背景图？解决亮度对比度叠加失效问题

你的核心问题是：每次调整滤镜时都直接绘制原始图片，没有叠加之前的调整效果，导致亮度和对比度始终独立作用在原图上，而非依次叠加。

问题根源分析 #

你当前的代码里，setBrightness和setContraste函数每次调用时，都是用ctx.drawImage(background, 0, 0)绘制原始图片，再单独应用当前滤镜。而且你尝试的background = background完全没用——background是加载时的原始Image对象，不会自动变成画布上的处理后图像。

解决方案一：维护参数，组合滤镜绘制原图（推荐） #

这种方式始终基于原始图片绘制，不会有画质损失，逻辑也更清晰。我们只需要保存当前的亮度和对比度参数，每次调整时重新组合滤镜并绘制原图。

修改后的代码：

var canvas = document.getElementById("mycanvas"),
    ctx = canvas.getContext("2d");

canvas.width = 934;
canvas.height = 622;

var background = new Image();
background.src = "data:image/png;base64,{{ imgExtract }}";

// 存储当前的亮度、对比度参数
let currentBrightness = 0;
let currentContrast = 0;

background.onload = function () {
    // 初始绘制原图
    ctx.drawImage(background, 0, 0);
    
    rangeBrillo.addEventListener("mousemove", () => {
        currentBrightness = Number(rangeBrillo.value);
        updateImage();
    });
    
    rangeContraste.addEventListener("mousemove", () => {
        currentContrast = Number(rangeContraste.value);
        updateImage();
    });
};

// 统一更新滤镜并绘制图像
function updateImage() {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 组合亮度和对比度滤镜
    ctx.filter = `brightness(${currentBrightness + 100}%) contrast(${currentContrast + 100}%)`;
    // 绘制原图并应用组合滤镜
    ctx.drawImage(background, 0, 0);
    // 重置滤镜，避免影响后续其他绘制操作
    ctx.filter = "none";
}

解决方案二：保存画布状态，基于处理后的图像调整 #

如果后续需要叠加更多复杂滤镜，可以每次调整后保存当前画布的像素数据，下次调整时基于这个数据继续处理：

var canvas = document.getElementById("mycanvas"),
    ctx = canvas.getContext("2d");

canvas.width = 934;
canvas.height = 622;

var originalImage = new Image();
originalImage.src = "data:image/png;base64,{{ imgExtract }}";
// 存储当前处理后的图像像素数据
let currentImageData = null;

originalImage.onload = function () {
    // 初始绘制原图并保存像素数据
    ctx.drawImage(originalImage, 0, 0);
    currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    rangeBrillo.addEventListener("mousemove", () => {
        adjustBrightness(Number(rangeBrillo.value));
    });
    
    rangeContraste.addEventListener("mousemove", () => {
        adjustContrast(Number(rangeContraste.value));
    });
};

function adjustBrightness(value) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 绘制上一次处理后的图像
    ctx.putImageData(currentImageData, 0, 0);
    // 应用亮度滤镜
    ctx.filter = `brightness(${value + 100}%)`;
    // 将画布内容重新绘制到自身，应用滤镜效果
    ctx.drawImage(canvas, 0, 0);
    // 保存新的处理后图像数据
    currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    ctx.filter = "none";
}

function adjustContrast(value) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.putImageData(currentImageData, 0, 0);
    ctx.filter = `contrast(${value + 100}%)`;
    ctx.drawImage(canvas, 0, 0);
    currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    ctx.filter = "none";
}

为什么之前的尝试无效？ #

你之前写的background = background只是变量的自我赋值，完全没有保存画布上的处理结果。background是加载时的原始Image对象，要获取画布上的处理后图像，需要用ctx.getImageData()获取像素数据，或者用canvas.toDataURL()生成新的图片源。

内容的提问来源于stack exchange，提问作者Ismael Jiménez