王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
效果图:
jQuery.cropper 是一款使用简单且功能强大的图片剪裁 jQuery 插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持 canvas，并且支持跨浏览器使用。
官网：https://fengyuanchen.github.io/cropperjs/
cropper 免费 CDN
https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js
cropper.js 配置参数
| 名称 | 类型及默认值 | 说明 |
| strict | 类型：Boolean，默认值true。 | 在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。 |
| responsive | 类型：Boolean，默认值true。 | 是否在窗口尺寸改变的时候重置cropper。 |
| checkImageOrigin | 类型：Boolean，默认值true。 | 默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。 |
| background | 类型：Boolean，默认值true。 | 是否在容器上显示网格背景。 |
| modal | 类型：Boolean，默认值true。 | 是否在剪裁框上显示黑色的模态窗口。 |
| guides | 类型：Boolean，默认值true。 | 是否在剪裁框上显示虚线。 |
| highlight | 类型：Boolean，默认值true。 | 是否在剪裁框上显示白色的模态窗口。 |
| autoCrop | 类型：Boolean，默认值true。 | 是否在初始化时允许自动剪裁图片。 |
| autoCropArea | 类型：Number，默认值0.8（图片的80%） | 0-1之间的数值，定义自动剪裁区域的大小。 |
| dragCrop | 类型：Boolean，默认值true。 | 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。 |
| movable | 类型：Boolean，默认值true。 | 是否允许移动剪裁框。 |
| resizable | 类型：Boolean，默认值true。 | 是否允许改变剪裁框的大小。 |
| zoomable | 类型：Boolean，默认值true。 | 是否允许放大缩小图片。 |
| mouseWheelZoom | 类型：Boolean，默认值true。 | 是否允许通过鼠标滚轮来缩放图片。 |
| touchDragZoom | 类型：Boolean，默认值true。 | 是否允许通过触摸移动来缩放图片。 |
| rotatable | 类型：Boolean，默认值true。 | 是否允许旋转图片。 |
| minContainerWidth | 类型：Number，默认值200。 | 容器的最小宽度。 |
| minContainerHeight | 类型：Number，默认值100。 | 容器的最小高度。 |
| minCanvasWidth | 类型：Number，默认值0。 | canvas 的最小宽度（image wrapper）。 |
| minCanvasHeight | 类型：Number，默认值0。 | canvas 的最小高度（image wrapper）。 |
| build | 类型：Function，默认值null。 | build.cropper事件的简写方式。 |
| built | 类型：Function，默认值null。 | built.cropper事件的简写方式。 |
| dragstart | 类型：Function，默认值null。 | dragstart.cropper事件的简写方式。 |
| dragmove | 类型：Function，默认值null。 | dragmove.cropper事件的简写方式。 |
| dragend | 类型：Function，默认值null。 | dragend.cropper事件的简写方式。 |
| zoomin | 类型：Function，默认值null。 | zoomin.cropper事件的简写方式。 |
| zoomout | 类型：Function，默认值null。 | zoomout.cropper事件的简写方式。 |
最终实现代码:
<html>
<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.row{
margin-bottom: 5px;
}
#photo {
max-width: 100%;
}
.img-preview {
width: 100px;
height: 100px;
overflow: hidden;
}
button {
margin-top:10px;
}
#result {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<label for="input" class="btn btn-danger" id="">
<span>选择图片</span>
<input type="file" id="input" class="sr-only">
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-2">
<img src="" id="photo">
</div>
<div class="col-sm-2">
<div>
<p>
预览(100*100)：
</p>
<div class="img-preview">
</div>
</div>
<button class="btn btn-primary" onclick="crop()">裁剪图片</button>
<div>
<br/>
<img src="" alt="裁剪结果" id="base64">
</div>
</div>
</div>
</div>
<script>
var initCropper = function (img, input){
var $image = img;
var options = {
viewMode: 2,
autoCropArea: 0.8, // 定义自动剪裁区域的大小
background:true, // 是否在容器上显示网格背景。
zoomable: false, // 是否允许放大缩小图片
minContainerHeight: 400,
minContainerWidth: 400,
preview: '.img-preview' // 预览图的class名
};
$image.cropper(options);
var $inputImage = input;
var uploadedImageURL;
if (URL) {
// 给input添加监听
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
// 判断是否是图像文件
if (/^image\/\w+$/.test(file.type)) {
// 如果URL已存在就先释放
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
// 销毁cropper后更改src属性再重新创建cropper
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
} else {
window.alert('请选择一个图像文件！');
}
}
});
} else {
$inputImage.prop('disabled', true).addClass('disabled');
}
}
var crop = function(){
var s = $('#photo').cropper('getCroppedCanvas');
var $image = $('#photo');
var base64url= s.toDataURL('image/jpeg'); //生成base64图片的格式
s.toBlob(function(blob){ //生成Blob的图片格式
console.log(URL.createObjectURL(blob));
$.ajax({
type: 'POST',
url: "./4.php" ,
cache:false,
dataType:'json',
data: {submit:1,base64:base64url} ,
success: function(msg){
if(msg=='1'){
alert('操作成功！');
}else{
alert('操作失败！');
}
}
});
// 裁剪后将图片放到指定标签
$('#result').attr('src', URL.createObjectURL(blob));
});
$('#base64').attr('src', base64url);
console.log(base64url);
}
$(function(){
initCropper($('#photo'),$('#input'));
});
</script>
</html>
<?php
if(@$_POST['submit']){
preg_match('/^(data:\s*image\/(\w+);base64,)/', @$_POST['base64'], $result);
// data:image/jpeg;base64, 替换成空
$base64=str_replace($result[1], '', str_replace('#','+',@$_POST['base64']));
// in_array() 函数搜索数组中是否存在指定的值。strtolower：把字符转换为小写
if(in_array(strtolower($result[2]),array('jpg','png','gif','jpeg'))){
$new_file = time().rand(1000,9999).".".$result[2];
}else{
$new_file = time().rand(1000,9999).".jpg";
}
// 创建一块画布，并从字符串中的图像流新建一副图像
$im = imagecreatefromstring(base64_decode($base64));
if ($im === false) {
echo 2;die;
}
// file_exists() 检查文件或目录是否存在。
if (!file_exists("images/".date('Ymd')."/")){
// 创建目录。若成功，则返回 true，否则返回 false。
mkdir("images/".date('Ymd')."/",0777,true);
}
// 解码 写入文件中
$re=file_put_contents("images/".date('Ymd')."/".$new_file, base64_decode($base64));
if($re){
echo 1;die;
}else{
echo 2;die;
}
}
?>
