素材牛

HTML5头像上传更换裁剪插件

 所属分类:网页特效-UI效果/布局,图片裁剪,上传

 浏览:538次-  下载:3次-  评论:1次-  发布时间:2019-01-05
HTML5头像上传更换裁剪插件兼容IE10
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:利用bootstrap样式排版已经点击功能,进行弹窗更换头像。html5 头像上传、更换、剪切插件。

详细介绍

利用bootstrap样式排版已经点击功能,进行弹窗更换头像。modal的div中有form表单提交地址

以下方法由网友提供:

遇到的几个情况希望能帮助到大家,后台情况 ,1,后台先接受到form提交过来的图片,并返回json,他的sitelogo.js有ajax操作,要求返回json格式,并且有

$arr = array ('result'=>路径); 
echo json_encode($arr);

只要后台返回json格式的数据,并且里面有result 字段  路径   

{"result":"upload/1470198980a.png"}

基本上就跑通了

Content - Disposition: form - data;
name = "avatar_data" {
    "x": 112.60000000000001,
    "y": 45.10000000000001,
    "height": 184.86043956043957,
    "width": 184.86043956043957}

在拿到提交过来的裁剪等数据到后台,php用img一系列函数裁剪保存到原路径,覆盖到开始的图片,就完成了,我是这样的思路

文件目录结构

  • bootstrap
    • css
      • ┝ bootstrap-theme.css
      • ┝ bootstrap-theme.css.map
      • ┝ bootstrap-theme.min.css
      • ┝ bootstrap.css
      • ┝ bootstrap.css.map
      • ┝ bootstrap.min.css
    • fonts
      • ┝ glyphicons-halflings-regular.eot
      • ┝ glyphicons-halflings-regular.svg
      • ┝ glyphicons-halflings-regular.ttf
      • ┝ glyphicons-halflings-regular.woff
      • ┝ glyphicons-halflings-regular.woff2
    • js
      • ┝ bootstrap.js
      • ┝ bootstrap.min.js
      • ┝ npm.js
  • cropper
    • ┝ cropper.css
    • ┝ cropper.js
    • ┝ cropper.min.css
    • ┝ cropper.min.js
  • ┝ index.html
  • ┝ jquery-1.10.2.js
  • ┝ logo.jpg
  • sitelogo
    • ┝ sitelogo.css
    • ┝ sitelogo.js

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

tcdiju
2019年02月22日

666666

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:3
所需牛币:10 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证