cropper.js图片裁剪实战使用

最新推荐文章于 2021-02-23 18:26:58 发布

tongluren381

最新推荐文章于 2021-02-23 18:26:58 发布

阅读量357

点赞数

文章标签： jquery php

原文链接：https://www.wangmingchang.com/4196.html

版权

https://www.cnblogs.com/GoTing/p/7536648.html

https://www.cnblogs.com/GoTing/p/11363494.html

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;

}

tongluren381

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cropper.js图片裁剪实战使用

https://www.cnblogs.com/GoTing/p/7536648.htmlhttps://www.cnblogs.com/GoTing/p/11363494.html 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ..
复制链接

扫一扫