实例 | 使用PHP+Cropperjs对图片进行裁剪并保存-王明昌博客

如果你对该文章中的内容有疑问/不解,可以点击此处链接提问

要注明问题和此文章链接地址点击此处跳转

效果图:

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

1 2	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;
	}

}


?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

<html>

<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>

</label>

</div>

</div>

<div>

<p>

预览(100*100)：

</p>

</div>

<div>

<br/>

</div>

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;

}

实例 | 使用PHP+Cropperjs对图片进行裁剪并保存

相关推荐

热门文章

热门标签

关注公众号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏