头像裁剪框html css,GitHub - saintic/layui-cropper-avatar: Layui头像裁剪组件

layui-cropper-avatar

Layui头像裁剪组件

说明

这是一款适用于Layui的[微改整合]第三方组件，基于cropper 3.1.3，实现点击一个按钮弹出裁剪框，完成选择、裁剪图片等操作，移动端自适应。

社区组件平台已经有一个cropper 图片截取(剪裁)上传组件，可惜我测试中有点问题并不如意，所以就把之前用的jquery插件改成layui组件，两者很相像，毕竟都是基于cropper.js(一个3.0.0，一个3.1.3)。

使用

NO.1

使用git clone、svn checkout或直接下载压缩包等方式获取仓库代码，将static中的css和mod的js模块复制到你的项目相关目录。

代码目录结构：

├── index.html

└── static

├── css

│ ├── ImgCropping.css //avatar裁剪框样式

│ └── cropper.min.css //cropper样式

└── mod

├── avatar.js //依赖cropper模块

└── cropper.js //cropper封装的layui模块

NO.2

在HTML的head中引入ImgCropping.css和cropper.min.css

NO.3

在HTML的script中调用模块(请先阅读Layui文档对其模块化有一定了解)：

layui.config({

base: '/static/mod/' //mod所在目录

}).use('avatar', function () {

var avatar = layui.avatar;

avatar.render({

success: function (base64, size) {

console.log(base64);

console.log(size);

//ajax upload

}

});

avatar模块定义了两个函数：render、base64ToBlob

请用render初始化，base64ToBlob用来把base64图片转为二进制，基本是用不到。

render函数接收object对象完成一些参数设置：

elem {string}

绑定一个元素，点击它则弹出图片裁剪框，默认是 #uploadAvatar ，所以可以放置一个按钮，设置id=uploadAvatar。

imgWidth {Number}

裁剪图片的宽度(像素)

success {Function}

用户点击确认裁剪并上传头像按钮的回调，但注意avatar本身不上传，所以需要在success中上传。

success传递两个参数：裁剪后的图片的base64(image/png)、base64的大小(单位Kb)

示例

index.html是示例，不能直接运行它，用nginx或者python启动一个web服务：

python2 -m SimpleHTTPServer 5000

访问127.0.0.1:5000效果大概是这样的：

如果你要更新cropper.js版本，在上面找到其仓库，下载dist中cropper.js(UMD)，参考Layui第三方组件规范改造UMD($固定为layui.jquery即可)

头像裁剪框html css,GitHub - saintic/layui-cropper-avatar: Layui头像裁剪组件相关推荐

头像裁剪框html css,js头像裁剪实现——canvas+Jcrop+jQuery
封好的插件不用写html啦,直接new一个就好了 var test = document.getElementById("test"); var clipBox = new cli ...
头像裁剪框html css,CSS3 clip-path实现的用户头像裁剪效果
HTML 导入代码模板: Susan Sanddollar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sunt p ...
vue-cropper 图片裁剪（修改裁剪框的大小以及位置）
一.安装使用 # npm 安装 npm install vue-cropper // 组件内使用 import { VueCropper } from 'vue-cropper' components ...
android 半透明裁剪框截取图片头像
申明:本文部分内容为网络相关资料整理,并结合本人实际工作总结而成.请引用或者转载注明出处,对于文章内容有疑问请留言. 一.功能简介对于图片的裁剪操作,可能比较常见.但是在一些app中使用半透明裁剪框 ...
上传头像时圆形裁剪框
上传头像到服务端时需要将图片裁剪,项目中用到的是圆形的裁剪框,先看效果: 代码实现如下: public class ClipImageBorderView extends View { /** * 水 ...
手捉手教你撸个css渐变边框，实现王者荣耀头像框
手捉手教你撸个css渐变边框,实现王者荣耀头像框看到UI设计了个渐变的边框,实现之后发现真像农的头像框效果 border-image: linear-gradient 废话不多说,直接上代码 &l ...
1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片对图片的裁剪以及调整(旋转.缩放 ...
cropper.js 实现HTML5 裁剪上传头像
cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) option相关参数说明: viewMode 显示模式 Type: Number Default: 0 Options: 0: ...
基于vue的图片裁剪框的实现
1.基于vue建设一个裁剪框全文附录我会放到最后,有需要的小伙伴自取 ## 1.1在没有添加图片的时候显示如上图的css样式 <label class="h-photo-left&q ...

头像裁剪框html css,GitHub - saintic/layui-cropper-avatar: Layui头像裁剪组件

头像裁剪框html css,GitHub - saintic/layui-cropper-avatar: Layui头像裁剪组件相关推荐

最新文章

热门文章