We were looking at the “Experimental” Computed Image Columns to see if there was a way to automatically make the images in our “Featured Image” column grayscale in Glide.
All of our images are in color, but let’s say you want to be able to “grey-out” or turn the image “grayscale” when and event has ended (after a certain date / time) or do the same if an item is no longer in inventory stock (inventory is zero).
How might we create a computed column of the same images in our Featured Image column on the fly but in greyscale to use as a replacement in our If Then Else column WITHOUT the need to re-upload grey versions of the images?
Thought maybe the Experimental “Adjust Color” might do the trick but don’t see a way to feed the original image parameter to this column. Any thoughts? Maybe it could be done another way?
Here’s another option without having to use Cloudinary. Put this in a javascript column and pass your image as the p1 parameter.
async function convertToGreyscale(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);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var grey = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = grey; // Red
data[i + 1] = grey; // Green
data[i + 2] = grey; // Blue
}
ctx.putImageData(imageData, 0, 0);
// Convert canvas to base64 Data URI
var greyscaleDataUri = canvas.toDataURL();
// Resolve the promise with the greyscale Data URI
resolve(greyscaleDataUri);
};
img.onerror = function() {
reject(new Error('Failed to load image'));
};
img.src = imageUrl;
} catch (error) {
reject(error);
}
});
}
return await convertToGreyscale(p1);
Is the URL dependent then on Glide’s Cloudinary account? If that’s the case, would it be recommended for a company to create their own Cloudinary account to generate their own greyscale URL?
It uses Glide’s Cloudinary to fetch the image, then transform it. I think Glide still uses it under the hood to transform images nowadays, so I’m fine with that. 100% safe if you create your own account though.
