Controlling the amount of blur in container background image

Feature Requests
1

Hi,

Is it possible to add a feature to control the amount of blur like this ?

Actually the blur is hard and we cannot see what the image is :disappointed_face:

With soft blur we can see the image and read the text :partying_face:

image
image972×514 61.3 KB

3 Likes
2

You can use some javascript to create a blurred version of an image.

async function convertToBlurred(imageUrl) {
  return new Promise(function(resolve, reject) {
    try {
      var img = new Image();
      img.crossOrigin = "Anonymous"; // To avoid CORS issues if loading from a different domain

      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        // Apply blur effect by setting the filter and redrawing the image
        ctx.filter = 'blur(15px)'; // Adjust blur value as needed
        ctx.drawImage(canvas, 0, 0);

        // Convert canvas to base64 Data URI
        var blurredDataUri = canvas.toDataURL();

        // Resolve the promise with the blurred Data URI
        resolve(blurredDataUri);
      };

      img.onerror = function() {
        reject(new Error('Failed to load image'));
      };

      img.src = imageUrl;
    } catch (error) {
      reject(error);
    }
  });
}


  return await convertToBlurred(p1);
3

Yes I know but I think it will be usefull to have a quick access to this feature because it’s more user friendly :wink:
If we’re not happy with the result or want more control then we can dig into code if we know how to.