How to blur an image

Help and Feedback Scripting Support
#1

Is there a way to blur an image? And if there is how to do it?

2 Likes
#2

Do a blur effect when you look at it.

Jokes aside, I don’t think that’s very possible as of now, unless you blur the image externally and save it, assuming you know what image you will use all the time.

1 Like
#3

Are you sure that there is not another way?

1 Like
#4

There is now with the EditableImage class. You’ll use AssetService:CreateEditableImageAsync to convert an existing image on the Roblox platform into one that can be manipulated. From here, use EditableImage:WritePixelsBuffer and EditableImage:ReadPixelsBuffer to implement a Gaussian blur or a simpler box blur

1 Like
#5

Might sound stupid but make a blurry png and upload it as a image and position, size it so it fits your image?

#6

i thought about it but it doesn’t work

#7

It’s possible to achieve this using editable images. Basically you convert the image to an array of pixels, perform a matrix operation on said pixels(representing a blur effect) and then write the pixels back to the image. Here’s what I was able to find from people that have tried before you:

#8

How do i do it?

local BlurModule = {};

local AssetService = game:GetService("AssetService");

function BlurModule.Blur(Image: Instance, BlurSize: number)
	if not (Image:IsA("ImageLabel") or Image:IsA("ImageButton")) then
		warn("Image is not a valid ImageLabel or ImageButton");
		return;
	end;
	
	BlurSize = BlurSize or 3;
	
	local success, EditableImage = pcall(function()
		return AssetService:CreateEditableImageAsync(Image.ImageContent);
	end);
	
	if not success then
		warn("Failed to create editable image: ", EditableImage);
		return;
	end;
	
	local Position = Vector2.new(Image.Position.X.Offset, Image.Position.Y.Offset);
	local Size = Vector2.new(Image.Size.X.Offset, Image.Size.Y.Offset);
	
	local ImageData = EditableImage:ReadPixelsBuffer(Position, Size);
end;

return BlurModule;
#9

Research how a box plur or a Gaussian blur is implemented. Study the EditableImage API to understand how the image is represented in the buffer, then apply your chosen modified algorithm to the buffer