Quiero generar una imagen borrosa a partir de una imagen normal. Busqué en Internet y descubrí que las personas lo han hecho al poner la propiedad del filtro CSS a través de javascript en la imagen para que se desenfoque. Pero se puede eliminar inspeccionando la página y no quiero eso.
Quiero generar una versión borrosa de la imagen a través de javascript. Creo que puedo hacerlo con canvas, pero nunca trabajé con canvas y cualquier ayuda será muy apreciada (:
Entonces, depende. Si le preocupa que lo eliminen con herramientas de desarrollo, entonces la respuesta probablemente sea "no puede".
La razón de esto es que si desea desenfocarlo con JavaScript, debe enviar la imagen desenfocada. Y, si envía la imagen no borrosa, pueden sacarla fácilmente de la pestaña de red, incluso si nunca la agrega directamente al DOM. Cualquier cosa que use como entrada para JavaScript puede ser obtenida por un usuario lo suficientemente inteligente.
Si desea que el usuario nunca pueda ver el original, solo el borroso, tendrá que desenfocarlo del lado del servidor.
Si, por alguna extraña razón, está de acuerdo con eso y aún desea desenfocarlo en el lienzo, deberá elegir e implementar un algoritmo de desenfoque para el lienzo. Hay muchos algoritmos de desenfoque diferentes para elegir. Probablemente el más común sería un desenfoque gaussiano .
El algoritmo no es una locura, pero tampoco es exactamente muy sencillo, y recomendaría usar una biblioteca en su lugar, como esta: glur . No lo he usado directamente, así que no puedo dar fe de ello, pero tiene medio millón de descargas a la semana en NPM, por lo que probablemente sea bastante sólido.
Puede aplicar un desenfoque a través del lienzo usando ctx.filter . CanvasRenderingContext2D.filter aceptará un (conjunto limitado de) filtros definidos como cadenas. Por ejemplo ctx.filter = "blur(10px)";
Consulte ctx.filter para ver un conjunto de filtros que puede usar directamente.
El ejemplo usa CanvasRenderingContext2D.filter para desenfocar la imagen con el tiempo.
const img = new Image; img.src = "https://i.stack.imgur.com/C7qq2.png?s=256&g=1"; img.addEventListener("load", () => requestAnimationFrame(uodate)); function drawImageBlur(img, blurAmount) { const ctx = can.getContext("2d"); ctx.clearRect(0,0,128,128); ctx.filter = "blur(" + blurAmount+ "px)"; ctx.drawImage(img, 128 - img.naturalWidth * 0.5, 128 - img.naturalHeight * 0.5); } var frameCount = 0; function uodate(time) { if (frameCount++ % 10 === 0) { // no point burning CPU cycles so only once every 10 frames drawImageBlur(img, Math.sin(time / 1000) * 5 + 6); } requestAnimationFrame(uodate); } canvas {border: 1px solid black;} <canvas id="can" width="256" height="256"></canvas>No hay forma de proteger la imagen de la inspección si aplica el desenfoque de imagen en el cliente (sin importar el método que use). Si desea ofuscar (difuminar) la imagen, debe hacerlo en el servidor.