需求:在一个后台页面中,插入iform页面,需求为更换头像(layui框架)

一.前提:创建user_buddha.html 页面

在侧边栏对应的 a 标签设置 href 属性 和 target 属性

  1.  <a href="/user_buddha.html" target="fm"><i class="layui-icon layui-icon-app"></i>更换头像</a>

二.实现裁剪区域图片的替换

在 <head> 中导入 cropper.css 样式表及在</body>前添加js文件样式

  1. <link rel="stylesheet" href="/lib/cropper/cropper.css" />
  1. <script src="/lib/jquery.js"></script>
  2. <script src="/lib/cropper/Cropper.js"></script>
  3. <script src="/lib/cropper/jquery-cropper.js"></script>

三.在卡片的 layui-card-body 主体区域中，定义如下的 HTML 结构

  1. <!-- 第一行的图片裁剪和预览区域 -->
  2. <div class="row1">
  3.   <!-- 图片裁剪区域 -->
  4.   <div class="cropper-box">
  5.     <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
  6.     <img id="image" src="/assets/images/sample.jpg" />
  7.   </div>
  8.   <!-- 图片的预览区域 -->
  9.   <div class="preview-box">
  10.     <div>
  11.       <!-- 宽高为 100px 的预览区域 -->
  12.       <div class="img-preview w100"></div>
  13.       <p class="size">100 x 100</p>
  14.     </div>
  15.     <div>
  16.       <!-- 宽高为 50px 的预览区域 -->
  17.       <div class="img-preview w50"></div>
  18.       <p class="size">50 x 50</p>
  19.     </div>
  20.   </div>
  21. </div
  22. <!-- 第二行的按钮区域 -->
  23. <div class="row2">
  24.   <button type="button" class="layui-btn">上传</button>
  25.   <button type="button" class="layui-btn layui-btn-danger">确定</button>
  26. </div>

 css结构:

  1. /* 设置卡片主体区域的宽度 */
  2. .layui-card-body {
  3.   width: 500px;
  4. }
  5.  
  6. /* 设置按钮行的样式 */
  7. .row2 {
  8.   display: flex;
  9.   justify-content: flex-end;
  10.   margin-top: 20px;
  11. }
  12.  
  13. /* 设置裁剪区域的样式 */
  14. .cropper-box {
  15.   width: 350px;
  16.   height: 350px;
  17.   background-color: cyan;
  18.   overflow: hidden;
  19. }
  20.  
  21. /* 设置第一个预览区域的样式 */
  22. .w100 {
  23.   width: 100px;
  24.   height: 100px;
  25.   background-color: gray;
  26. }
  27.  
  28. /* 设置第二个预览区域的样式 */
  29. .w50 {
  30.   width: 50px;
  31.   height: 50px;
  32.   background-color: gray;
  33.   margin-top: 50px;
  34. }
  35.  
  36. /* 设置预览区域下方文本的样式 */
  37. .size {
  38.   font-size: 12px;
  39.   color: gray;
  40.   text-align: center;
  41. }
  42.  
  43. /* 设置图片行的样式 */
  44. .row1 {
  45.   display: flex;
  46. }
  47.  
  48. /* 设置 preview-box 区域的的样式 */
  49. .preview-box {
  50.   display: flex;
  51.   flex-direction: column;
  52.   flex: 1;
  53.   align-items: center;
  54. }
  55.  
  56. /* 设置 img-preview 区域的样式 */
  57. .img-preview {
  58.   overflow: hidden;
  59.   border-radius: 50%;
  60. }

四.实现基本裁剪效果

  1. // 1.1 获取裁剪区域的 DOM 元素
  2. var $image = $('#image')
  3. // 1.2 配置选项
  4. const options = {
  5.   // 纵横比
  6.   aspectRatio: 1,
  7.   // 指定预览区域
  8.   preview: '.img-preview'
  9. }
  10.  
  11. // 1.3 创建裁剪区域
  12. $image.cropper(options)

五.点击弹出文件选择框

默认的文件选择框样式比较丑，所以我们定义这个结构，让其隐藏，给文件选择框指定可以上传的文件类型

  1. <input type="file" id="file" accept="image/png,image/jpeg" />

定义一个按钮，文本是 上传，一旦用户点击按钮，我们手动触发 文件选择框的点击事件

  1. $('#btnChooseImage').on('click', function() {
  2.   $('#file').click()
  3. })

六.更换裁剪区域的图片

  • 给文件选择框绑定 change 事件

  • 用户选择了文件就会触发这个事件，通过 e.target.files 获取用户选择文件列表

  • 通过索引0拿到用户选择的文件

  • 将文件转化为路径

  • 利用 $image 重新初始化裁剪区域

    1. // 为文件选择框绑定 change 事件
    2. $('#file').on('change', function(e) {
    3.   // 获取用户选择的文件
    4.   var filelist = e.target.files
    5.   if (filelist.length === 0) {
    6.     return layer.msg('请选择照片！')
    7.   }
    8.  
    9.   // 1. 拿到用户选择的文件
    10.   var file = e.target.files[0]
    11.   // 2. 将文件，转化为路径
    12.   var imgURL = URL.createObjectURL(file)
    13.   // 3. 重新初始化裁剪区域
    14.   $image
    15.     .cropper('destroy') // 销毁旧的裁剪区域
    16.     .attr('src', imgURL) // 重新设置图片路径
    17.     .cropper(options) // 重新初始化裁剪区域
    18. })

七.将裁剪后的头像上传到服务器

    创建一个 Canvas 画布，将 Canvas 画布上的内容，转化为 base64 格式的字符串

  1.  var dataURL = $image
  2.       .cropper('getCroppedCanvas', {
  3.         // 创建一个 Canvas 画布
  4.         width: 100,
  5.         height: 100
  6.       })
  7.       .toDataURL('image/png')
  1. $.ajax({
  2.       method: 'POST',
  3.       url: '//',
  4.       data: {
  5.         avatar: dataURL
  6.       },
  7.       success: function(res) {
  8.         if (res.status !== 0) {
  9.           return layer.msg('更换头像失败！')
  10.         }
  11.         layer.msg('更换头像成功！')
  12.         window.parent.getUserInfo()
  13.       }
  14.     })

总结:

base64格式的图片,隐藏的input需要注意,简单的裁剪更换头像功能代码全了    js样式我会上传至gitee    clone地址:git@gitee.com:dizaocto/style_sheet.git

渲染更换头像 文件转成url地址的更多相关文章

  1. MVC验证12-使用DataAnnotationsExtensions对整型、邮件、最小值、文件类型、Url地址等验证

    原文:MVC验证12-使用DataAnnotationsExtensions对整型.邮件.最小值.文件类型.Url地址等验证 本文体验来自http://dataannotationsextension ...

  2. UE4的csv文件导入、URL地址的读取及动态材质的设置

    1．csv文件的导入 UE4是可以直接导入csv文件的,其过程和其他文件资源(图片Texture,静态网格物体StaticMesh等)相似,但在导入过程中有一些需要注意的点. 如下图所示 这是一份编辑 ...

  3. 在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 ...

  4. python-根据URL地址下载文件

    博主个人网站:https://chenzhen.online 使用Python中提供的urllib.request下载网上的文件 #coding=utf-8 """ 目标 ...

  5. 从一个url地址到最终页面渲染完成，发生了什么？

    从一个url地址到最终页面渲染完成,发生了什么? 1.DNS 解析 : 将域名地址解析为IP地址 浏览器DNS缓存 系统DNS缓存 路由器DNS缓存 网络运营商DNS缓存 递归搜索: www.baid ...

  6. ASP php获取文件URL地址等方法

    $_SERVER["HTTP_REFERER"] rss中可用 echo next(explode("=", $_SERVER["QUERY_STRI ...

  7. FastDFS上传文件访问url地址直接下载

    fdfs 存储节点storage安装nginx,修改nginx配置文件 location ~/group[1-9]/M00 {  if ( $query_string ~* ^(.*)paramete ...

  8. nginx 配置web 虚拟文件夹 而且codeIgniter,thinkphp 重定向url 地址

    nginx 配置虚拟文件夹而且url 重定向 server { #侦听80port listen 8090; #定义使用www.xx.com訪问 server_name 127.0.0.1; #设定本 ...

  9. web工程中URL地址的推荐写法

    三.web工程中URL地址的推荐写法 使用c标签<c:url value="" /> 会自动添加项目名 -> value中的值 前面要加 “/” 在JavaWeb ...

随机推荐

  1. centOS7.*安装nginx和简单使用

    安装nginx 去官网下载对应的nginx包,推荐使用稳定版本. 上传下载好的包到服务器 安装依赖环境 安装gcc环境. yum install gcc-c++ 安装PCRE库,用于解析正则表达式. ...

  2. Python File fileno() 方法

    概述 fileno() 方法返回一个整型的文件描述符(file descriptor FD 整型),可用于底层操作系统的 I/O 操作.高佣联盟 www.cgewang.com 语法 fileno() ...

  3. PHP password_get_info() 函数

    password_get_info() 函数用于返回指定散列(hash)的相关信息. PHP 版本要求: PHP 5 >= 5.5.0, PHP 7高佣联盟 www.cgewang.com 语法 ...

  4. PHP substr_count() 函数

    实例 计算 "world" 在字符串中出现的次数: <?php高佣联盟 www.cgewang.comecho substr_count("Hello world. ...

  5. Python代码规范性检测

    一定要注重代码规范,按照平时的代码管理,可以将Python代码规范检测分为两种: 静态本地检测:可以借助静态检查工具,比如:Flake8,Pylint等,调研了一下,用Flake8的相对较多,功能满足 ...

  6. jsp应用-实现用户登陆功能

    项目结构 1.login.jsp 这个没什么好说的,把表单提交到校验页面进行校验 2.首先获取request域中user,password,然后进行校验,校验成功把信息存入session域,然后转发到 ...

  7. C++ Json工具--Jsoncpp用法简介

    文章目录 Json简介 用法简介 数据类型 C++代码示例 代码执行输出结果 JSON在线解析及格式化验证 - JSON.cn Json简介 JSON(JavaScript Object Notati ...

  8. JS 仿京东放大镜

    css代码 body{ margin:; } .box { width: 1210px; position: relative; background-color: pink; margin: 0 a ...

  9. 静态集成腾讯TBS X5内核WebView，从微信提取新版30M浏览器内核打包进apk

    目录 前情提要 第一步:下载老版本SDK得到jar 获取SDK 集成SDK 步骤二.下载提取最新TBS X5内核 方法1:从微信中提取 方法2:App内内访问tbs调试页安装新内核 步骤三.集成内核到 ...

  10. C#LeetCode刷题之#628-三个数的最大乘积（ Maximum Product of Three Numbers）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3726 访问. 给定一个整型数组,在数组中找出由三个数组成的最大乘 ...