How do I adjust brightness and contrast filters on a base64 URL?

Question

How do I adjust brightness and contrast filters on a base64 URL?

When presented with an image in base64 format like this:

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

What is the most efficient method to programmatically alter a filter (such as brightness or contrast) without generating any img or canvas elements in the view? And once modified, how can it be converted back to a base64 URL?

javascript typescript image-processing css-filters

Answer 1

Answer №1

To achieve this, you can place the image on an HTML canvas with applied filters and then convert that canvas into a base64 URL without adding it to the document.

By following these steps asynchronously:
This process typically takes about 1-10ms

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"));
    }
}

If you already have the Image instance loaded, you could also perform the operation synchronously.

Here is how you would do it synchronously:

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");
}

Answer 2

To achieve this, you can place the image on an HTML canvas with applied filters and then convert that canvas into a base64 URL without adding it to the document.

By following these steps asynchronously:
This process typically takes about 1-10ms

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"));
    }
}

If you already have the Image instance loaded, you could also perform the operation synchronously.

Here is how you would do it synchronously:

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");
}

How do I adjust brightness and contrast filters on a base64 URL?

Answer №1

Similar questions

Is there a way to effectively incorporate react-native with php and ensure that the data returned by the fetch function is

Error TRPCClient: The unexpected presence of the token "'<'", ""<!DOCTYPE "... invalidates the JSON format within Next.JS

The request to login at the specified API endpoint on localhost:3000 was not successful, resulting in a

"Exploring the world of 3rd party libraries in Angular2 with Typescript and Webpack

Tips for Elevating State with React Router Version 6

Creating a universal parent constructor that can take in an object with keys specific to each child class

The child component is failing to detect changes, consider using alternative methods like ngDoCheck to update the component's value

A proposal for implementing constructor parameter properties in ECMAScript

When comments are submitted via AJAX, they are displayed twice, but upon reloading the page, they only appear once

Utilizing JavaScript or jQuery to adjust the cursor pointer value based on user input

Struggling with setting up a PHP and Ajax registration and login system

Encountering problems during the installation of Ionic - Error code 'EPROTO'

Variations of a particular software package are necessary

Currently, I am experiencing difficulties with two specific aspects of the website I am working on - the hamburger menu and the slideshow feature

Is there a method of converting React components into strings for manipulation?

Sending a function along with event and additional arguments to a child component as a prop

How to extract a specific part of a string with regular expressions

Different placeholder text rendered in two text styles

AngularJS: Pause the data binding functionality temporarily

Assigning a variable in jQuery to a PHP variable that has not been defined can halt the script