效果展示
公司需要截取指定大小像素的广告图，并能保存本地，由于第一次使用cropper插件，编写该文。做好笔记！！！
-
功能：截图自定义大小的图片并保存本地，可以用来：制作头像，截取指定格式像素
-
cropper.js 通过canvas实现图片裁剪，最后在通过canvas获取裁剪区域的图片base64串。
-
cropper官方文档：cropper.js
前端页面
首先要导入对应的插件，这里我是使用的是cdn
js文件
<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>
css文件
<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">
标签布局
<img src="" id="fileOne">
<div id="caijianModal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="addModalLabel">
<div class="modal-dialog" role="document" style="width: 1000px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">裁剪图片</h4>
</div>
<div class="modal-body">
<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>
<img src="" id="textImage">
</div>
<div class="row" style="visibility:hidden" id="cropperBody">
<div class="col-sm-6 col-sm-offset-2">
<img src="" id="photo">
</div>
<div class="col-sm-2">
<div>
<p> 预览图 ： </p>
<div class="small">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12 col-sm-12">
<button type="button" class="btn btn-md btn-return"
data-dismiss="modal">取消</button>
<button class="btn btn-default" type="button" onclick="cai()">确定裁剪</button>
</div>
</div>
</div>
</div>
</div>
JS方法
<script>
// 修改自官方demo的js
//配置一个初始化的方法
var initCropper = function (img, input){
var $image = img;
var options = {
aspectRatio: wLocation / hLocation,//这里是裁剪框的长宽 可以自己定义
viewMode: 1,
dragMode: 'none',//图片是否可以拖动 这里我设为none
preview: ".small",//这是预览图绑定，和一个div绑定就可以
responsive: false, //是否在窗口尺寸改变的时候重置cropper 这里我要固定裁剪框所以设置为false
autoCrop: true, //初始化自动生成裁剪框
};
$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');
}
}
//初始化加载生成
$(function(){
initCropper($('#photo'),$('#input'));
});
//点击确认裁剪方法
function cai(){
console.log("裁剪格式："+wLocation+"HHH:"+hLocation)
var id = $("#imageManageId").val();
var size={width:wLocation,height:hLocation};
//要裁剪成的图像大小！！！这里可以通过该设置生成自己想要的指定图片大小！！！！！！！！！！！！！！！
var cas = $('#photo').cropper('getCroppedCanvas',size);
if(cas == null){
alert("请选择图片");
return false;
}else{
var base64url = cas.toDataURL('image/jpeg');//转换成图片格式
$.ajax({
url : "${base}/advertisimagemanage/cropper.do",//上传地址
dataType:'json',
type: "post",
data: {
imgBase64 : base64url,
},
success: function (data) {
//将生成的图显示出来
$("#fileOne").attr("src",""); //将原裁剪的图删除
$("#fileOne").attr("src",'${baseImg}' +"/"+ data.message); //最新裁剪的图显示
alert( "图片裁剪成功！" );
caijianHidden();
}
});
}
}
</script>
按照自己想要的cropper样式，以及设置好图片生成的大小格式就可以进行转化为base64编码进行传输
后端接收文件方法
@ResponseBody
@RequestMapping(value="cropper")
public Map<String,Object> cropper(String imgBase64,String id,HttpServletRequest request){
Map<String,Object> map = new HashMap<String,Object>();
//定义自己想要的生成图片的路径 ---
StringBuffer fileDir = new StringBuffer();
fileDir.append(getFilePath());
fileDir.append("advertisImageCopper/");
fileDir.append(UUIDUtils.random());
String imageName = UUIDUtils.random();
imgBase64 = imgBase64.split(",")[1];
String messageString = "";
try {
messageString = saveImg(imgBase64,fileDir,imageName);
} catch (Base64DecodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
map.put("message", messageString);
return map;
}
/**
* base64转化成图片并存储
* @param baseImg
* @return
* @throws Base64DecodingException
*/
public String saveImg(String baseImg,StringBuffer pathImage,String imageName) throws Base64DecodingException {
byte[] b;
byte[] bs;
OutputStream os = null;
//把图片转换成二进制
b = Base64.decode(baseImg.replaceAll(" ", "+"));
String path = pathImage+"";
File file = new File(path);
if (!file.exists() && !file.isDirectory()) {
file.mkdirs();//创建目录
}
String pathCai = path + "/" +imageName+".jpg";
File imageFile = new File(pathCai);
BASE64Decoder d = new BASE64Decoder();
// 保存图片！！
try {
bs = d.decodeBuffer(Base64.encode(b));
os = new FileOutputStream(imageFile);
os.write(bs);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
if (os != null) {
try {
os.close();
} catch (IOException e) {
e.getLocalizedMessage();
}
}
}
//返回图片的路径给 前端显示
String fileName = "/"+pathCai.replace(SystemPropertiesUtils.getProperty("upload.path"), "");
return fileName;
}
个人重点
指定像素格式，并转化为base64编码获得的这个编码就可以直接进行传输了！！
var size={width:wLocation,height:hLocation};//要裁剪成的图像大小
var cas = $('#photo').cropper('getCroppedCanvas',size);
var base64url = cas.toDataURL('image/jpeg');//转换成图片格式
base64编码格式转化为图片：转化一下图片格式即可使用Io读取图片，具体代码已经贴在上面
所有代码和方法已经贴出，需要的小伙伴可以直接复制，修改一下参数即可，有错误的大家一起探讨一下~谢谢！
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
