i am thinking of starting a new project, which may be something close to IG that would showcase personal photos or paintings. main difference is, i would like to create conditions for when a post is public vs private, where public posts are full-res, viewable and/or downloadable, whereas private posts need to be unlocked (probably for a fee, maybe even by reaching certain milestones within the app).
before i start experimenting, i would like to know if this is doable in glide, preferably without using custom code:
my understanding of filters (in glide) is that they apply to visibility and/or limiting the data. it might work if ill be creating two versions of the image, manually placing the overlays for private posts, then displaying the original image for public post. this will entail a lot of manual work and wont be efficient, as those posts will need to go thru manual edits prior to actually being posted.
im thinking i need something more automated. (maybe you are referring to lens or effects filters, which im not sure glide has). but thanks for the feedback.
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);
i prefer not to use custom code only because i have 0 experience. im mostly a UI UX designer, and got into glide only because the devs we hired for previous projects kept causing dellys and other problems.
if i can actually make it work, i might start with this. thanks a bunch.
Should be pretty easy. Just copy the code I gave you above into a javascript column, point the p1 parameter to your image column, and even though the result will look like a bunch of gibberish, it will actually render as an image in an image component.
as usual, your solution worked! quick and easy, i was even able to add my if-then-else conditions as rules for which one to display. ill start building this asap.
thanks! both methods work fine. i created a new test app just to experiment with building AI components and practicing prompts. seems using AI in most (if not all) future projects) is inevitable. gearing up for this eventuality.
