【前端】模糊图片

简介: 1.使用svg和css来模糊图片[代码 http://bin.amazeui.org/lixedacuje/1/edit?html,css,output) #css-filter-blur { margi...

1.使用svg和css来模糊图片

[代码 http://bin.amazeui.org/lixedacuje/1/edit?html,css,output)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title> </title>
 
</head>
<body>
<img id="css-filter-blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" alt="Blur" height="200" width="300" />

<svg id="svg-image-blur">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>
 
</body>
</html>
#css-filter-blur { margin: 20px; }
#css-filter-blur:hover { 
    -webkit-filter: blur(1px); 
    filter: url(#blur-effect-1);
}

.lt-ie9 #css-filter-blur:hover {
    filter:         progid:DXImageTransform.Microsoft.Blur(Strength=2);
    position: relative;
    left: -2px;
    top: -2px;
    }

鼠标移动到图片上既可以看到效果。

2.使用第三方动画库来模糊,比如animo-js

[示例](http://labs.bigroomstudios.com/libraries/animo-js


// Blurring of the image
$('#blur_img').animo('blur');

// Focus
$('#blur_img').animo('focus');


// Blurring of the text (slowly and heavily)
$('#blur_text').animo('blur', {duration: 3, amount: 15});

// Focus
$('#blur_text').animo('focus');

```

目录
相关文章
|
12月前
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
817 5
|
11月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
929 68
|
11月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
173 4
|
11月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
129 1
|
11月前
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
563 3
|
11月前
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
217 2
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
237 13
|
12月前
|
前端开发
前端之图片操作
前端之图片操作
|
12月前
|
前端开发 JavaScript
node接收前端上传的图片,单文件、多文件同name、多文件不同name
本文介绍了在Node.js中使用multer模块接收前端上传的图片,包括单文件上传、多文件上传(同name和不同name)以及任意类型文件上传的方法。
413 0
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理
循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理