PHP - jQuery.cropper 图片剪裁插件、上传、并存储

发布时间:2018-06-06 编辑:小张个人博客 查看次数:6300

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事件的简写方式。

案例代码:

在项目中引入以下文件:

<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/>
              <!--  <p>
                    结果:
                </p>
                <img src="" alt="裁剪结果" id="result">
		<p>-->
		    base64:
		</p>
		<img src="" alt="裁剪结果" id="base64">
            </div>
        </div>
    </div>
</div>

<script>
// 修改自官方demo的js
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图片的格式
// $image.cropper('getCroppedCanvas',{ });
s.toBlob(function(blob){   //生成Blob的图片格式 
console.log(URL.createObjectURL(blob)); 
	$.ajax({ 
	       type: 'POST', 
		url: "index.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>

cropper.js  裁剪图片并上传

php 后端处理

<?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;
	}

}

jQuery.cropper 图片剪裁插件

注释:

 imagecreatefrom 系列函数用于从文件或 URL 载入一幅图像,成功返回图像资源,失败则返回一个空字符串。


该系列函数有:

  1. imagecreatefromgif():创建一块画布,并从 GIF 文件或 URL 地址载入一副图像

  2. imagecreatefromjpeg():创建一块画布,并从 JPEG 文件或 URL 地址载入一副图像

  3. imagecreatefrompng():创建一块画布,并从 PNG 文件或 URL 地址载入一副图像

  4. imagecreatefromwbmp():创建一块画布,并从 WBMP 文件或 URL 地址载入一副图像

  5. imagecreatefromstring():创建一块画布,并从字符串中的图像流新建一副图像



mkdir(path,mode,recursive,context)  创建目录。若成功,则返回 true,否则返回 false。

1、path 尝试新建一个由 path 指定的目录。必需。规定要创建的目录的名称。

2、mode 在 Windows 下被忽略。自 PHP 4.2.0 起成为可选项,默认的 mode 是 0777,意味着最大可能的访问权。

3、对 context 的支持是 PHP 5.0.0 添加的。

4、recursive 参数是 PHP 5.0.0 添加的,必需。规定是否设置递归模式。






出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号