一旦我有了 base64 url,我该如何更改亮度和对比度的过滤器?

Once I have a base64 url how can I change the filter for brightness and contrast?

如果我有一张 base64 格式的图片,例如

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDAAwfqNRk/rjcYX+PxrV/wtWqwJSTlboMgAAAABJRU5ErkJggg==

在不在视图中创建任何 img 或 canvas 标记的情况下以编程方式更改滤镜(例如亮度、对比度)的最快方法是什么?然后一旦更改,将其转换回 base64 url?

您可以通过将图像放到应用滤镜的 HTML canvas 上,然后将 canvas 转回 base64 URL.

由于您从未将 canvas 添加到文档中,因此它永远不会被看到。

这是异步执行的方式:
这大约需要 1-10 毫秒

function applyFiltersToImage(imageURL, callBack) {
    // load the image url into an image object
    const image = new Image();
    image.src = imageURL;

    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext('2d');
    image.onload = () => {        
        canvas.width = image.width;
        canvas.height = image.height;

        // apply css filters here
        ctx.filter = 'brightness(0.5) contrast(2)';

        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        
        // turn canvas back into a base64 image URL
        callBack(canvas.toDataURL("image/png"));
    }
}

如果您已经加载了 Image 实例,则可以同步执行此操作。

这是同步执行的方式:

function applyFiltersToImageSync(imageObject) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext('2d');    
    canvas.width = imageObject.width;
    canvas.height = imageObject.height;

    // apply css filters here
    ctx.filter = 'brightness(0.5) contrast(2)';

    ctx.drawImage(imageObject, 0, 0, canvas.width, canvas.height);
    //turn canvas back into a base64 image
    return canvas.toDataURL("image/png");
}