效果展示

公司需要截取指定大小像素的广告图，并能保存本地，由于第一次使用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">&times;</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',//图片是否可以拖动   这里我设为nonepreview: ".small",//这是预览图绑定，和一个div绑定就可以responsive: false, //是否在窗口尺寸改变的时候重置cropper   这里我要固定裁剪框所以设置为falseautoCrop: 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 blocke.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 blocke.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读取图片，具体代码已经贴在上面

所有代码和方法已经贴出，需要的小伙伴可以直接复制，修改一下参数即可，有错误的大家一起探讨一下~谢谢！

cropper截图插件（自定义像素的图片并保存本地）相关推荐

python怎么下载图片怎么保存到本地_详解Python下载图片并保存本地的两种方式
一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url ...
如何不开会员，把易企秀图片下载保存本地
易企秀的素材很多,为了防止被盗用,他们网站平台的素材和元素基本都是防盗链的或者是加密的形式,这样让一些想要图片的会员十分尴尬. 下面教你怎么保存易企秀的图片?不需要VIP奥! 1.先发布易企秀模板,然 ...
python下载图片到文件夹_Python下载图片并保存本地的四种方法
一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url ...
解决base64转图片视频保存本地无法识别的问题
项目有要求前端向后台发base64,后台接收base64转换成图片或者视频保存在本地. 这是前端代码 (没有问题) <!DOCTYPE html> <html lang=&q ...
微信小程序-如何实现图片授权保存本地？【亲测有效，附完整源码】
boot接收图片并保存本地
controller层 public String filePath="D:/FeedbackPicture/"; //定义上传文件的存放位置@ResponseBody@PostM ...
html2canvas图片位移_html2canvas html截图插件图片放大清晰度处理方案，支撑恣意放大倍数，处理原插件图片偏移题目...
html2canvas html截图插件图片放大清晰度处理方案,支撑恣意放大倍数,处理原插件图片偏移题目 Author:youzebin (2016.12.6) 插件下载地点:https://gith ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
cropper.js插件做图片上传裁剪图片大小
前端代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="U ...

cropper截图插件（自定义像素的图片并保存本地）

效果展示

前端页面

标签布局

JS方法

后端接收文件方法

个人重点

cropper截图插件（自定义像素的图片并保存本地）相关推荐

最新文章

热门文章