图片变暗js

function darkenImage(imageElement, darknessFactor) {
    // 创建一个canvas元素
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    
    // 设置canvas尺寸与图片相同
    canvas.width = imageElement.width;
    canvas.height = imageElement.height;
    
    // 将图片绘制到canvas上
    ctx.drawImage(imageElement, 0, 0);
    
    // 获取图片的像素数据
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    
    // 遍历每个像素并调整亮度
    for (var i = 0; i < data.length; i += 4) {
        // 减少每个颜色通道的值
        data[i] -= darknessFactor;     // red
        data[i + 1] -= darknessFactor; // green
        data[i + 2] -= darknessFactor; // blue
        
        // 确保颜色值不会低于0
        data[i] = Math.max(0, data[i]);
        data[i + 1] = Math.max(0, data[i + 1]);
        data[i + 2] = Math.max(0, data[i + 2]);
    }
    
    // 将调整后的像素数据放回canvas
    ctx.putImageData(imageData, 0, 0);
    
    // 返回新的图片元素
    return canvas.toDataURL();
}

// 使用示例
var img = new Image();
img.src = 'path_to_your_image.jpg';
img.onload = function() {
    var darkenedImageSrc = darkenImage(img, 50); // 变暗程度为50
    var darkenedImgElement = document.createElement('img');
    darkenedImgElement.src = darkenedImageSrc;
    document.body.appendChild(darkenedImgElement);
};