Adicionar blur a imagem com canvas no JavaScript

2d atrás

A função #JavaScript abaixo recebe a URL ou base64 de uma imagem e retorna ela com efeito blur, em formato base64.

function imageBlurred(src) {
	return new Promise(resolve => {
		const image = new Image();
		
		image.onload = () => {
			const
				canvas = document.createElement('canvas'),
				context = canvas.getContext('2d');

			canvas.width = image.width;
			canvas.height = image.height;

			context.filter = 'blur(8px)';
			context.drawImage(image, 0, 0, canvas.width, canvas.height);

			resolve(canvas.toDataURL());
		}
		
		image.src = src;
	});
}

A função aplica um efeito blur de 8px e salva a imagem em base64, para testar a função use o código abaixo:

imageBlurred('data:image/png;base64, iVBORw0K...').then(result => console.log(result)); // data:image/png;base64, iVBORw0K...

Comentários (0)