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

Error message encountered: React hydrate TypeError - the function __webpack_require_.i(...) is not recognized as a

"Looking to trigger a server click using JQuery or Javascript in your code? Here's how you can

List of coordinates extracted from PolylineMeasure plugin in the React Leaflet library

Dramatist - shutting down an angular pop-up dialog

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

Guard does not prompt router redirection

Send a PHP array back to jQuery AJAX and dynamically populate a list using conditional statements

Unable to locate module during deployment to Vercel platform

Identifying selected shapes in CSS/Javascript by outlining them with small rectangles placed on each corner

Fluid sifting and interactive webpage

What is the best way to create a layout with two images positioned in the center?

What is the proper way to write a function that verifies the presence of a key in an object and then retrieves the associated value?

Struggling to reach the same level of bundle optimization with webpack + angular when compared to angular-cli

How to divide a string by space after a specific character count using Javascript

Checking nested arrays recursively in Typescript

Execute function upon initial user interaction (click for desktop users / tap for mobile users) with the Document Object Model (DOM)

To prevent the default alignment in case the text exceeds the input length, stop the automatic alignment

Unable to retrieve $scope.property using direct access, however it is visible when printed to the console using console.log($

What is the url of the file at input.files[i]?

Using JQuery's $.ajax() method to send a post request and pass data to invoke a specific method in