渲染更换头像 文件转成url地址
需求:在一个后台页面中,插入iform页面,需求为更换头像(layui框架)
一.前提:创建user_buddha.html 页面
在侧边栏对应的 a 标签设置 href 属性 和 target 属性
<a href="/user_buddha.html" target="fm"><i class="layui-icon layui-icon-app"></i>更换头像</a>
二.实现裁剪区域图片的替换
在 <head> 中导入 cropper.css 样式表及在</body>前添加js文件样式
<link rel="stylesheet" href="/lib/cropper/cropper.css" />
<script src="/lib/jquery.js"></script>
<script src="/lib/cropper/Cropper.js"></script>
<script src="/lib/cropper/jquery-cropper.js"></script>
三.在卡片的 layui-card-body 主体区域中，定义如下的 HTML 结构
<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1">
<!-- 图片裁剪区域 -->
<div class="cropper-box">
<!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
<img id="image" src="/assets/images/sample.jpg" />
</div>
<!-- 图片的预览区域 -->
<div class="preview-box">
<div>
<!-- 宽高为 100px 的预览区域 -->
<div class="img-preview w100"></div>
<p class="size">100 x 100</p>
</div>
<div>
<!-- 宽高为 50px 的预览区域 -->
<div class="img-preview w50"></div>
<p class="size">50 x 50</p>
</div>
</div>
</div
<!-- 第二行的按钮区域 -->
<div class="row2">
<button type="button" class="layui-btn">上传</button>
<button type="button" class="layui-btn layui-btn-danger">确定</button>
</div>
css结构:
/* 设置卡片主体区域的宽度 */
.layui-card-body {
width: 500px;
} /* 设置按钮行的样式 */
.row2 {
display: flex;
justify-content: flex-end;
margin-top: 20px;
} /* 设置裁剪区域的样式 */
.cropper-box {
width: 350px;
height: 350px;
background-color: cyan;
overflow: hidden;
} /* 设置第一个预览区域的样式 */
.w100 {
width: 100px;
height: 100px;
background-color: gray;
} /* 设置第二个预览区域的样式 */
.w50 {
width: 50px;
height: 50px;
background-color: gray;
margin-top: 50px;
} /* 设置预览区域下方文本的样式 */
.size {
font-size: 12px;
color: gray;
text-align: center;
} /* 设置图片行的样式 */
.row1 {
display: flex;
} /* 设置 preview-box 区域的的样式 */
.preview-box {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
} /* 设置 img-preview 区域的样式 */
.img-preview {
overflow: hidden;
border-radius: 50%;
}
四.实现基本裁剪效果
// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
// 纵横比
aspectRatio: 1,
// 指定预览区域
preview: '.img-preview'
} // 1.3 创建裁剪区域
$image.cropper(options)
五.点击弹出文件选择框
默认的文件选择框样式比较丑，所以我们定义这个结构，让其隐藏，给文件选择框指定可以上传的文件类型
<input type="file" id="file" accept="image/png,image/jpeg" />
定义一个按钮，文本是 上传，一旦用户点击按钮，我们手动触发 文件选择框的点击事件
$('#btnChooseImage').on('click', function() {
$('#file').click()
})
六.更换裁剪区域的图片
给文件选择框绑定 change 事件
用户选择了文件就会触发这个事件，通过
e.target.files获取用户选择文件列表通过索引0拿到用户选择的文件
将文件转化为路径
利用
$image重新初始化裁剪区域// 为文件选择框绑定 change 事件
$('#file').on('change', function(e) {
// 获取用户选择的文件
var filelist = e.target.files
if (filelist.length === 0) {
return layer.msg('请选择照片！')
} // 1. 拿到用户选择的文件
var file = e.target.files[0]
// 2. 将文件，转化为路径
var imgURL = URL.createObjectURL(file)
// 3. 重新初始化裁剪区域
$image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', imgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域
})
七.将裁剪后的头像上传到服务器
创建一个 Canvas 画布，将 Canvas 画布上的内容，转化为 base64 格式的字符串
var dataURL = $image
.cropper('getCroppedCanvas', {
// 创建一个 Canvas 画布
width: 100,
height: 100
})
.toDataURL('image/png')
$.ajax({
method: 'POST',
url: '//',
data: {
avatar: dataURL
},
success: function(res) {
if (res.status !== 0) {
return layer.msg('更换头像失败！')
}
layer.msg('更换头像成功！')
window.parent.getUserInfo()
}
})
总结:
base64格式的图片,隐藏的input需要注意,简单的裁剪更换头像功能代码全了 js样式我会上传至gitee clone地址:git@gitee.com:dizaocto/style_sheet.git
渲染更换头像 文件转成url地址的更多相关文章
- MVC验证12-使用DataAnnotationsExtensions对整型、邮件、最小值、文件类型、Url地址等验证
原文:MVC验证12-使用DataAnnotationsExtensions对整型.邮件.最小值.文件类型.Url地址等验证 本文体验来自http://dataannotationsextension ...
- UE4的csv文件导入、URL地址的读取及动态材质的设置
1．csv文件的导入 UE4是可以直接导入csv文件的,其过程和其他文件资源(图片Texture,静态网格物体StaticMesh等)相似,但在导入过程中有一些需要注意的点. 如下图所示 这是一份编辑 ...
- 在java的xml文件配置数据库URL地址时提示The reference to entity "characterEncoding" must end with the ';' delimiter.错误信息
配置数据库的URL<property name="url" value="jdbc:mysql://127.0.0.1:3306/micro_message&quo ...
- python-根据URL地址下载文件
博主个人网站:https://chenzhen.online 使用Python中提供的urllib.request下载网上的文件 #coding=utf-8 """ 目标 ...
- 从一个url地址到最终页面渲染完成，发生了什么？
从一个url地址到最终页面渲染完成,发生了什么? 1.DNS 解析 : 将域名地址解析为IP地址 浏览器DNS缓存 系统DNS缓存 路由器DNS缓存 网络运营商DNS缓存 递归搜索: www.baid ...
- ASP php获取文件URL地址等方法
$_SERVER["HTTP_REFERER"] rss中可用 echo next(explode("=", $_SERVER["QUERY_STRI ...
- FastDFS上传文件访问url地址直接下载
fdfs 存储节点storage安装nginx,修改nginx配置文件 location ~/group[1-9]/M00 { if ( $query_string ~* ^(.*)paramete ...
- nginx 配置web 虚拟文件夹 而且codeIgniter,thinkphp 重定向url 地址
nginx 配置虚拟文件夹而且url 重定向 server { #侦听80port listen 8090; #定义使用www.xx.com訪问 server_name 127.0.0.1; #设定本 ...
- web工程中URL地址的推荐写法
三.web工程中URL地址的推荐写法 使用c标签<c:url value="" /> 会自动添加项目名 -> value中的值 前面要加 “/” 在JavaWeb ...
随机推荐
- Python os.open() 方法
概述 os.open() 方法用于打开一个文件,并且设置需要的打开选项,模式参数mode参数是可选的,默认为 0777.高佣联盟 www.cgewang.com 语法 open()方法语法格式如下: ...
- Python 字典(Dictionary) str()方法
Python 字典(Dictionary) str()方法 描述 Python 字典(Dictionary) str() 函数将值转化为适于人阅读的形式,以可打印的字符串表示.高佣联盟 www.cge ...
- P4463 [集训队互测2012] calc 拉格朗日插值 dp 多项式分析
LINK:calc 容易得到一个nk的dp做法 同时发现走不通了 此时可以考虑暴力生成函数. 不过化简那套不太熟 且最后需要求多项式幂级数及多项式exp等难写的东西. 这里考虑观察优化dp的做法. 不 ...
- P3565 由简单的树形dp 引入 长链刨分
这道题感觉不太行 因为自己没想出来. 先说一下暴力吧,取三个点 让两两之间的距离相等怎么做呢,看起来是很复杂的样子的,但是仔细观察发现 答案出自一个点的儿子之间 或者儿子和父亲之间. 暴力枚举三个点然 ...
- hdu6787（骰子+往回推的传输带问通过方案，dp）
题:http://acm.hdu.edu.cn/showproblem.php?pid=6787 题意:有1~n标号的格子,上面有m个传输带(传送带传的位置要传到之前去,1位置不能有格子)1~11的骰 ...
- SLAM中的逆深度参数化
参数化问题 在SLAM的建图过程中,把像素深度假设成了高斯分布.那么这么假设是否是合适的呢?这里关系到一个参数化的问题. 我们经常用一个点的世界坐标x,y,z三个量来描述它,这是一种参数化形式.我们认 ...
- Chrome-AdGuard 无与伦比的广告拦截扩展
一款无与伦比的广告拦截扩展,对抗各式广告与弹窗. AdGuard 广告拦截器可有效的拦截所有网页上的所有类型的广告,甚至是在 Facebook.Youtube 以及其他万千网站上的广告! AdGuar ...
- css 命名规则 BEM!
随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理.著作权归作者所有. BEM本质应该是一个css命名方案,最流行的命名规则之一就是BEM ...
- 动态路由 - EIGRP
EIGRP 特性 EIGRP(增强内部网关路由协议)是思科的私有协议,属于距离矢量路由协议,但又具有链路状态的特性.并且支持 VLSM(可变长子网和无类路由协议).但在本质上说还是传送路由条目. 具有 ...
- Visual Studio 2019预览，净生产力
本文章为机器翻译. https://blogs.msdn.microsoft.com/dotnet/2018/12/13/visual-studio-2019-net-productivity/ 该文 ...