图像裁剪插件--cropper的基本使用

cropperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括IE9以上的现代浏览器。（关键是使用方法简单，几行代码就可以搞定）

基本使用步骤如下：

在 <head> 中导入 cropper.css 样式表
在 <body> 的结束标签之前，按顺序导入如下的 js 脚本(先是jquery.js，再是Cropper.js，最后是jquery-cropper.js)
在需要用到裁剪的主体区域中，定义如下的 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>

美化样式
实现基本裁剪效果

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

更换裁剪的图片基本步骤：

拿到用户选择的文件

var file = e.target.files[0]

根据选择的文件，创建一个对应的 URL 地址：

var newImgURL = URL.createObjectURL(file)

先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域

$image.cropper('destroy')    // 销毁旧的裁剪区域.attr('src', newImgURL)  // 重新设置图片路径.cropper(options)     // 重新初始化裁剪区域

将裁剪后的图片，输出为 base64 格式的字符串

var dataURL = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布width: 100,height: 100}).toDataURL('image/png')    // 将 Canvas 画布上的内容，转化为 base64 格式的字符串

完整的案例：

<link rel="stylesheet" href="/assets/lib/layui/css/layui.css" />
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
<link rel="stylesheet" href="/assets/css/user/user_avator.css" />

user_avator.css，

html,
body {margin: 0;padding: 0;
}body {padding: 15px;background-color: #f2f3f5;
}/* 设置卡片主体区域的宽度 */
.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%;
}#file {display: none;
}

html，

    <!--卡片区域--><div class="layui-card"><div class="layui-card-header">更换头像</div><div class="layui-card-body"><!--主要利用 cropper 插件来实现--><!-- 第一行的图片裁剪和预览区域 --><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"><!--通过 accept 属性可以指定，允许用户选择什么类型的文件--><input type="file" id="file" accept="image/png,image/jpg,image/jpeg" /><button type="button" class="layui-btn" id="btnChooseImage">上传</button>   <button type="button" class="layui-btn layui-btn-danger" id="btnUpload">确定</button></div></div></div><!-- 导入 layui 的 js --><script src="/assets/lib/layui/layui.all.js"></script><!-- 导入 jQuery --><script src="/assets/lib/jquery.js"></script><!--导入Cropper.js--><script src="/assets/lib/cropper/Cropper.js"></script><script src="/assets/lib/cropper/jquery-cropper.js"></script><!-- 导入 baseAPI --><script src="/assets/js/baseAPI.js"></script><!--导入自己的js--><script src="/assets/js/user/user_avator.js"></script>

user_avator.js，

$(function () {const layer = layui.layer;// 1.1 获取裁剪区域的 DOM 元素var $image = $('#image');// 1.2 配置选项const options = {// 纵横比 16/9--长方形、1--正方形aspectRatio: 1,// 指定预览区域preview: '.img-preview'};// 1.3 创建裁剪区域$image.cropper(options);//为 “上传” 按钮绑定点击事件$('#btnChooseImage').on('click', function () {$('#file').click();//为文件选择框绑定 change 事件$('#file').on('change', function (e) {// console.log(e.target.files);//获取用户选择的文件const filelist = e.target.files;if (filelist.length === 0) {return layer.msg('请选择照片');}//拿到用户选择的文件const file = e.target.files[0];//将文件转化为路径const newImgURL = URL.createObjectURL(file);//重新初始化裁剪区$image.cropper('destroy') // 销毁旧的裁剪区域.attr('src', newImgURL) // 重新设置图片路径.cropper(options) // 重新初始化裁剪区域});//为“确定”按钮绑定点击事件$('#btnUpload').on('click', function () {//1.拿到用裁剪之后的头像var dataURL = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布width: 100,height: 100}).toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串//2.调用接口，将头像上传到服务器$.ajax({method: 'POST',url: '/my/update/avatar',data: {avatar: dataURL},success: function(res){if(res.status !== 0){return layer.msg('更换头像失败!');}layer.msg('更换头像成功!');window.parent.getUserInfo();}});});});
})

图像裁剪插件--cropper的基本使用相关推荐

jQuery 图像裁剪插件Jcrop
Jcrop简介 Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能. Jcrop是一款免费的软件,采用MIT License发布. 注: ...
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
图片上传裁剪插件cropper.js的API详解
jQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropp ...
【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件
插件介绍这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪.旋转,花了不少时间才看到了这个插件,感觉 ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件
[Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...
cropbox.js 头像裁剪插件
cropbox.js 一个轻量级和简单的JavaScript,Jquery,YUI插件来裁剪您的头像. 特征支持dataUrl显示图像(函数getDataURL) 支持Blob上传图片(函数getB ...
使用 jQuery Jcrop 实现图像裁剪
一.使用方法: 代码: // 载入CSS文件 <link rel="stylesheet" href="css/jquery.Jcrop.css"> ...
cropper（图片裁剪插件）
https://github.com/fengyuanchen/cropper cropper使用说明一.特性 jQuery v1.9.1以上版本支持插件有38个options,27种method ...
【前端知识】Cropper图片裁剪插件中文文档
Cropper 插件教程 cropper官网 cropperjs下载地址 cropper视频教程插件导入 <link rel="stylesheet" href=" ...

图像裁剪插件--cropper的基本使用

基本使用步骤如下：

更换裁剪的图片基本步骤：

图像裁剪插件--cropper的基本使用相关推荐

最新文章

热门文章