这次我们做的项目需要实现一个微信公众号头像上传并且剪裁的功能，实在没有头绪，之后通过网上搜索和自己的修改实现了一个适合我们这个框架的方法。
首先本次项目我们的页面用的事velocity框架，页面代码是：
<li>
<span class="ti"><img src="$tp.headImg"></span>
<div class="ci"><span><a href="#" class="ed" id="diyUploadimg">更换头像</a></span></div>
</li><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
var voice = {
localId: '',
serverId: ''
};
wx.config({
debug: false,
appId: '${weixin.appId}',
timestamp: '${weixin.timestamp}',
nonceStr: '${weixin.nonceStr}',
signature: '${weixin.signature}',
jsApiList: [
'chooseImage', 'uploadImage','openLocation','getLocation','scanQRCode','startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice'
]
});
wx.ready(function () {
// 5 图片接口
// 5.1 拍照、本地选图
var images = {
localId: [],
serverId: []
};
document.querySelector('#diyUploadimg').onclick = function () {
alert(1)
wx.chooseImage({
count: 1,
success: function (res) {
images.localId = res.localIds;
uploadImg();
}
});
};
// 5.3 上传图片
function uploadImg() {
if (images.localId.length == 0) {
alert('请先使用 chooseImage 接口选择图片');
return;
}
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function (res) {
i++;
//alert('已上传：' + i + '/' + length);
images.serverId.push(res.serverId);
if (i < length) {
upload();
}else{
wxImgCallback();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload();
};
var tag=0;
function wxImgCallback() {
$.ajax({
type : "get",
async : false,//变异步为同步
url : "wx_uploadImg.html",
data : {
"imgServerId" : images.serverId[0]
},
success : function(data) {
window.location.href='/wx/headImg.html?imgurl='+data;
tag=1;
}
});
}
}); ApiConfig config = new ApiConfig(Constant.appId, Constant.appSecret);
// 微信照片上传功能
String ticket = config.getJsApiTicket();
String code = request.getParameter("code");
String url= baseurl+"/wx/teacherBaseInfo.html";//注意此处路径需要与本页面路径完全一致，如果需要变得 页面跳转到此页面参数也必须保持一致
Weixin w = WeixinUtil.sign(ticket, url);
modelMap.addAttribute("weixin", w);首先是html代码：
<div class="container">
<div class="row">
<div class="span12">
<form id="cutImage">
<div class="jc-demo-box">
<img style="width: 300px;height: 300px" src="$!url" id="target" alt="[Jcrop Example]" name="" />
<input type="hidden" name="srcImg" value="$!url"/>
<div style="display: none">
<label>X1 <input type="text" size="4" id="x1" name="x" /></label>
<label>Y1 <input type="text" size="4" id="y1" name="y" /></label>
<label>X2 <input type="text" size="4" id="x2" name="width" /></label>
<label>Y2 <input type="text" size="4" id="y2" name="height" /></label>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="buton">
<a href="#" class="btn btn-no" onclick="fanhui()">取消</a>
<a href="#" class="btn btn-ok" onclick="baoCun()">提交</a>
</div>
</body><script>
function showCoords(c)
{
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
};
$(function() {
$('#target').Jcrop({
aspectRatio: 1, //选中区域宽高比为1，即选中区域为正方形
bgColor:"#ccc", //裁剪时背景颜色设为灰色
bgOpacity:0.1, //透明度设为0.1
allowResize:true, //不允许改变选中区域的大小
allowMove:true,//是否允许移动选中区域。
setSelect:[0,0,100,100] , //初始化选中区域
onChange: showCoords,
onSelect: showCoords
}
);
});
function baoCun(){
_url = '/wx/cutImage.json';
$.ajax({
cache: true,
type: 'POST',
url: _url,
data: $('#cutImage').serialize(),
success: function(data) {
if(data.code == 0){
alert(data.msg);
if(data.type == 0){
window.location.href="/wx/teacherBaseInfo.html";
}
if(data.type == 1){
window.location.href="/wx/parentBaseInfo.html";
}
}else {
alert(data.msg)
}
}
});
}
function fanhui() {
window.history.back(-1);
}
</script> @RequestMapping("/cutImage.json")
@ResponseBody//注意此处，我用的springboot框架，此方法一定要加上这个注释，我就是忽略了返回值不能是总是不对脑 残了
public Map cutImage(ModelMap modelMap, HttpServletRequest request, String srcImg, String destImg, int x, int y, int width, int height){
Map result = new HashMap();
WxUser tp = (WxUser) request.getSession().getAttribute("wxUser");//此处调通后开放
//图片的相对路径
String imagPath=request.getParameter("srcImg");
String fileRealPath = request.getSession().getServletContext().getRealPath("/") ;
System.out.println("图片路径："+fileRealPath);
// String fileRealPath="d://";
String newFileName= UUID.randomUUID()+".jpg";
//实际图片路径
String img = imagPath.replaceAll(baseurl,"");
String path1=fileRealPath+img;
//裁剪后存储到服务器的图片路径
String path2=fileRealPath+"upload/weixin/"+newFileName;
System.out.println("图片路径："+path1);
System.out.println("输出路径："+path2);
try{
CutImage(path1, path2, x, y, width, height);
if("0".equals(tp.getType())){
WxUser wxUser = wxUserService.findById(tp.getId().toString());
String url = "/upload/weixin"+path2.substring(path2.lastIndexOf("/"));
wxUser.setHeadImg(url);
wxUserService.update(wxUser);
result.put("type","0");
}else {
WxUserParent wxUserParent = wxUserParentService.findById(tp.getId().toString());
String url = "/upload/weixin"+path2.substring(path2.lastIndexOf("/"));
wxUserParent.setHeadImg(url);
wxUserParentService.update(wxUserParent);
result.put("type","1");
}
result.put("code",0);
result.put("msg","成功");
}catch(Exception e){
result.put("code",1);
result.put("msg","失败");
}
return result;
}
/**
* @param path1 图片原路径
* @param path2 裁剪后存储的路径
* @param x x轴
* @param y y轴
* @param w
* @param h
*/
public static void CutImage(String path1,String path2,int x,int y,int w,int h){
FileInputStream fileInputStream=null;
ImageInputStream iis=null;
try {
//读取图片文件，建立文件输入流
fileInputStream=new FileInputStream(path1);
//创建图片的文件流 迭代器
Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader=it.next();
//获取图片流 建立文图 文件流
iis=ImageIO.createImageInputStream(fileInputStream);
//获取图片默认参数
reader.setInput(iis, true);
ImageReadParam param=reader.getDefaultReadParam();
//定义裁剪区域
Rectangle rect=new Rectangle(x,y,w,h);
param.setSourceRegion(rect);
BufferedImage bi=reader.read(0,param);
ImageIO.write(bi, "jpg", new File(path2));
} catch (Exception e) {
e.printStackTrace();
System.out.println("裁剪失败");
}finally{
try {
if(fileInputStream!=null){
fileInputStream.close();
}
if(iis!=null){
iis.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}以上就是我这个功能的代码，我只是自己留下以后可能用得到，还少一部分代码，有时间我就加上。
补上之前上传头像那块的Java代码，之前少弄了那个上传文件的代码，很关键哈哈：
String filetype=".zip|.xls|.xlsx|.doc|.docx|.ppt|.pptx|.jpg|.jpeg|.png|.gif|.rar|.txt|.csv|.pdf|.wps|.dps";
public boolean isfiletype(String suffix){
return filetype.contains(suffix.toLowerCase());
}
@RequestMapping("/uploadfiles.html")
@ResponseBody
public String uploadfile( @RequestParam String fid,HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> m = new HashMap<String, Object>();
try {
//取得上传的文件
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
multipartRequest.getParameter("");
MultipartFile file = multipartRequest.getFile(fid);
//取得上传的文件
// response.setContentType("text/html");
// response.setCharacterEncoding("UTF-8");
//得到文件名称
String realFileName = file.getOriginalFilename();
String suffix = realFileName.substring(realFileName.lastIndexOf("."));
//判断文件类型是否可用和文件类型
if (!isfiletype(suffix)) {
m.put("success", false);/** 结果类型 */
m.put("message", "你上传的文件类型不正确！");/** 返回消息 */
m.put("errorCode", 1);/** 错误代码 */
return RenderUtil.renderJson(CodeConstants.CODE_SUCCESS, m);
}
String fileRealPath = request.getSession().getServletContext().getRealPath("/") + "/upload/";
UUID uuid = UUID.randomUUID();
String randomName = UUID.randomUUID().toString() + suffix;
//判断文件夹是否存在
File targerFile = new File(fileRealPath);
//判断是否存在目录
if (!targerFile.exists()) {
targerFile.mkdirs();
}
//保存文件
File uploadFile = new File(fileRealPath + randomName);
FileCopyUtils.copy(file.getBytes(), uploadFile);
DecimalFormat df=new DecimalFormat("######0.00");
long i=file.getSize();
String s=null;
if(i<1024){
s=i+"B";
}else if(i>1024&&i<1048576){
s=df.format((double)i/1024)+"KB";
}else {
s=df.format((double)i/1048576)+"MB";
}
//配置文件实体信息
m.put("success", true);/** 结果类型 */
m.put("message", "文件上传成功！");/** 返回消息 */
m.put("filepath", "/upload/" + randomName);/** 返回消息 */
m.put("filesize",s);/** 返回消息 */
m.put("errorCode", 0);/** 错误代码 */
return RenderUtil.renderJson(CodeConstants.CODE_SUCCESS, m);
} catch (IOException e) {
m.put("success", false);/** 结果类型 */
m.put("message", "上传失败！");/** 返回消息 */
m.put("errorCode",1);/** 错误代码 */
return RenderUtil.renderJson(CodeConstants.CODE_SUCCESS, m);
}
}