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

Question

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

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

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

Answer 1

您可以通过将图像放到应用滤镜的 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");
}

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

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

javascript

typescript

image-processing

css-filters