jQuery-cropper插件完整的API：http://www.jq22.com/jquery-info9322

1. 基本使用步骤

在 <head> 中导入 cropper.css 样式表：

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

在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：

<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

3、在卡片的 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>

4、美化的样式：

/* 设置卡片主体区域的宽度 */
.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%;
}

5、实现基本裁剪效果：

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

2. 更换裁剪的图片

拿到用户选择的文件

var file = e.target.files[0]

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

var newImgURL = URL.createObjectURL(file)

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

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

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

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

Canvas 技术，是浏览器网页中实现绘图的一门技术。它是由 <canvas> 标签和一套绘图 API 组成的！

   $('#sure').click(function(){let i = image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布width: 100,height: 100});//将图片转为base64var str = i.toDataURL();$.ajax({type:'POST',url:'/my/update/avatar',data :{avatar: str},success:function(res){layer.msg(res.message);if(res.status === 0){window.parent.getUserInfo();}}});});

Ajax — cropper (图片剪裁)基本用法相关推荐

ASP.NET Ajax实现图片剪裁
实现这个功能主要用到了JQuery和基于JQuery的图片处理插件JCrop. JQuery可以下载下来,或者在代码中这样引用<script type="text/javascript ...
html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...
vue之使用Cropper进行图片剪裁上传压缩
vue之使用Cropper进行图片剪裁上传在项目中,对上传的图片按照比例和尺寸进行裁剪,以便于应用到不同的场景和平台上.这里采用cropper插件裁剪图片一.cropper的使用使用教程:htt ...
cropper简单且功能强大的图片剪裁jQuery插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropper提供了大量的参数 ...
php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api
图片剪裁插件Image Cropper使用方法引入必要的js和css核心文件构建html,可以将图片或canvas直接包裹到一个块级元素中初始化插件,可以使用$.fn.cropper方法来初始化 ...
【前端知识】Cropper图片裁剪插件中文文档
Cropper 插件教程 cropper官网 cropperjs下载地址 cropper视频教程插件导入 <link rel="stylesheet" href=" ...
IM4Java + GraphicsMagick 实现高清图片剪裁处理
2019独角兽企业重金招聘Python工程师标准>>> 简单介绍 GraphicsMagick是ImageMagick的一个分支,相对于ImageMagick而言,TA处理速度更快, ...
Android图片剪裁库
最近利用一周左右的业余时间,终于完成了一个Android图片剪裁库,核心功能是根据自己的理解实现的,部分代码参考了Android源码的图片剪裁应用.现在将该代码开源在Github上以供大家学习和使用, ...
android图片适配到裁剪框,Android图片剪裁-调用系统实现，完美适配魅族等机型
System-Photo-Cropper Android System Photo Cropper 使用系统原生的图片剪裁库,完美适配魅族等机型 Step 1 First you need a sys ...

Ajax — cropper (图片剪裁)基本用法

1. 基本使用步骤

2. 更换裁剪的图片

Ajax — cropper (图片剪裁)基本用法相关推荐

最新文章

热门文章