H5活动页面遇到的坑+微信分享代码
h5活动页面功能：[在手机上微信分享]
1.上传两张图片
2.播放一个背景音乐
很简单是么？那说明你知道的太少了，其实里面的坑好多
一下是制作的心路历程：
坑1、iphone上传照片的时候，因为有oriten的原因，所以传上去旋转了
坑2、安卓autoplay不生效
用js获取图片的oritain值，然后自己旋转裁切
结果发现脚本获取的orita值是错误的，而且
由于要着急上线，所以里面换了一个组件：百度的webuploader
坑一解决：图片上传旋转的问题解决：
坑3：可是因为用了七牛的图片服务，所以安卓遇到了坑，前端传过来的图片留不能写入七牛，
最后没经过调试才发现上面的坑，
解决办法是：在前端却别安卓和iphone 让他们调用不行的服务，如果是iphone直接上传七牛，如果是安卓则先存本地，然后再传七牛，如果七牛上传成功，则返回七牛的地址
如果七牛失败，则保存本地服务器地址。这样就保证图片能传上来
最后问题总算解决：
下面是代码：
jsp
<%@ page trimDirectiveWhitespaces="true" %>
<%@ page import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<% String basepath = request.getContextPath();%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
制作告白书
Event5.java
package com.cyt.babyhealth.event.controller;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import javax.annotation.Resource;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import org.imgscalr.Scalr;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import com.alibaba.druid.util.Base64;
import com.alibaba.fastjson.JSON;
import com.cyt.babyhealth.event.entity.Confession;
import com.cyt.babyhealth.event.service.ConfessionService;
import com.cyt.babyhealth.event.util.ApiResult;
import com.cyt.babyhealth.event.util.ImageUtil;
import com.cyt.babyhealth.event.util.QiniuUtil;
import com.cyt.core.controller.BaseController;
import com.cyt.core.util.UUIDUtil;
import com.sun.mail.handlers.image_gif;
@Controller
@RequestMapping("/5")
public class Event5Contrller extends BaseController {
@Resource(name = "confessionServiceImpl")
private ConfessionService confessionService;
private final String upurl = "img/event/procession/";
@RequestMapping(value = "/gb")
public String index(Integer id, Integer tid) {
Confession confession = new Confession();
confession
.setImg1Url("http://qn.ivybaby.me/@/hd/tu1.jpg");
confession
.setImg2Url("http://qn.ivybaby.me/@/hd/tu2.jpg");
confession.setBabyNickname("你");
confession.setBabyRelationship("人");
getRequest().setAttribute("confession", confession);
return "event5/tomakeConfession";
}
@RequestMapping(value = "/cid")
// @ResponseBody
public String cid() {
String p = getRequest().getParameter("p");
String id = getRequest().getParameter("id");
Confession confession = confessionService.find(Integer
.parseInt(id));
if (confession != null) {
getRequest().setAttribute("confession", confession);
}
if("1".equals(p)){
getRequest().setAttribute("p", p);
}
return "event5/tomakeConfession";
}
@RequestMapping(value = "/uploadConfessionImage")
@ResponseBody
public ApiResult uploadConfessionImage() throws IOException {
ApiResult apiResult = new ApiResult();
String imageUrl = "";
String base64Img = getRequest().getParameter("base64Img");
System.out.println(base64Img);
String lastType = "";
String[] base64ImgArr = base64Img.split(";");
if (base64ImgArr.length > 0) {
String imageType = base64ImgArr[0];
String[] ImgTypeArr = imageType.split("/");
if (ImgTypeArr.length == 2) {
lastType = ImgTypeArr[1];
}
String base64Image = base64ImgArr[1].split(",")[1];
// base64编码字符串解码(后端语言实现)，将解码后的二进制数据以二进制的形式保存到服务器上
byte[] imageByte = Base64.base64ToByteArray(base64Image);
imageUrl = getQiNiuUrl(imageByte, lastType);
imageUrl = BASE_QN_URL+imageUrl;
}
HashMap m = new HashMap();
m.put("imageUrl", imageUrl);
apiResult.setData(m);
// getRequest().setAttribute("imageUrl", imageUrl);
return apiResult;
}
/**
* 制作好以后，自动跳转到分享页面
* @param confession
* @param request
* @param response
*/
@RequestMapping(value = "/addConfession")
@ResponseBody
public void addConfession(Confession confession,String img1Url,
MultipartHttpServletRequest request, HttpServletResponse response) {
String sessionId = request.getSession().getId();
System.out.println("*********************sessionId:********************"+sessionId);
System.out.println("confession:"+JSON.toJSONString(confession));
System.out.println("img1Url:"+img1Url);
if (confession != null) {
Confession confessionNew = new Confession();
confessionNew.setCreateTime(new Date());
confessionNew.setUpdateTime(new Date());
confessionNew.setStatus(1);
// confessionNew.setCreateUid(111);
// confessionNew.setUpdateUid(ManagerUtil.getAdminId());
//
String babyNickName = confession.getBabyNickname();
String babyRelationship = confession.getBabyRelationship();
if ("其他人".equals(babyRelationship)) {
babyRelationship = "人";
}
String image1Url = confession.getImg1Url();
String image2Url = confession.getImg2Url();
confessionNew.setBabyNickname(babyNickName);
confessionNew.setBabyRelationship(babyRelationship);
confessionNew.setImg1Url(image1Url);
confessionNew.setImg2Url(image2Url);
confessionNew.setUpdateTime(new Date());
confessionService.save(confessionNew);
getRequest().setAttribute("confession", confessionNew);
getRequest().setAttribute("p", "1");
try {
response.sendRedirect("cid?p=1&id="
+ confessionNew.getId());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
// return "event5/tomakeConfession";
}
@RequestMapping(value = "/previesConfession")
public String previesConfession(Confession confession) {
if (confession != null) {
Confession confessionNew = new Confession();
confessionNew.setCreateTime(new Date());
confessionNew.setUpdateTime(new Date());
confessionNew.setStatus(1);
// confessionNew.setCreateUid(111);
// confessionNew.setUpdateUid(ManagerUtil.getAdminId());
//
String babyNickName = confession.getBabyNickname();
String babyRelationship = confession.getBabyRelationship();
if ("其他人".equals(babyRelationship)) {
babyRelationship = "人";
}
String image1Url = confession.getImg1Url();
String image2Url = confession.getImg2Url();
confessionNew.setBabyNickname(babyNickName);
confessionNew.setBabyRelationship(babyRelationship);
confessionNew.setImg1Url(image1Url);
confessionNew.setImg2Url(image2Url);
confessionNew.setUpdateTime(new Date());
// confessionService.save(confessionNew);
getRequest().setAttribute("confession", confession);
}
return "event5/tomakeConfession";
}
public static byte[] cropBytes(InputStream in, int size) {
BufferedImage bi = null;
try {
// bi = ImageIO.read(new File(srcPath));
bi = ImageIO.read(in);
int sWidth = bi.getWidth();
int sHeight = bi.getHeight();
int x = 0;
int y = 0;
if (sWidth >= sHeight) {
bi = Scalr.resize(bi, Scalr.Method.QUALITY,
Scalr.Mode.FIT_TO_HEIGHT, size);
x = (bi.getWidth() - size) / 2;
} else {
bi = Scalr.resize(bi, Scalr.Method.QUALITY,
Scalr.Mode.FIT_TO_WIDTH, size);
y = (bi.getHeight() - size) / 2;
}
bi = Scalr.crop(bi, x, y, size, size);
ByteArrayOutputStream out = new ByteArrayOutputStream();
ImageIO.write(bi,"jpg", out);
return out.toByteArray();
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
public String getQiNiuUrl(byte[] file, String fileType) throws IOException {
// 上传封面
String filename = UUIDUtil.getUUID() + "." + fileType;
if (upurl != null) {
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("YYYYMMdd");
String dateUrl = sdf.format(date);
String key = upurl + dateUrl + "/" + filename;
boolean flag = QiniuUtil.IVYBABY.uploadFile(key, file);
if (flag) {
return key;
} else {
return null;
}
} else {
return null;
}
}
// @RequestMapping("/updateHeadImg")
// @ResponseBody
// public ApiResult updateHeadImg(@RequestParam(required = true) MultipartFile image) {
// ApiResult apiResult = new ApiResult();
// // 上传文件
// if (!image.isEmpty()) {
//
// String filename = UUIDUtil.getUUID() + image.getOriginalFilename();
//
// String key ="";
// if (upurl != null) {
// Date date = new Date();
// SimpleDateFormat sdf = new SimpleDateFormat("YYYYMMdd");
// String dateUrl = sdf.format(date);
// key = upurl + dateUrl + "/" + filename;
// }
// try {
//// byte[] imageByte = this.cropBytes(image.getInputStream(), 420);
// boolean flag = QiniuUtil.IVYBABY_IMG.uploadFile(key, image.getBytes());
// System.out.println("上传七牛：" + flag);
// } catch (IOException e) {
// e.printStackTrace();
// }
// apiResult.getData().put("usIco",BASE_QN_URL+key);
// } else {
// apiResult.setMsg("图片不能为空");
// }
// return apiResult;
// }
//
public static final byte[] input2byte(InputStream inStream)
throws IOException {
ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
byte[] buff = new byte[100];
int rc = 0;
while ((rc = inStream.read(buff, 0, 100)) > 0) {
swapStream.write(buff, 0, rc);
}
byte[] in2b = swapStream.toByteArray();
return in2b;
}
@RequestMapping("/updateHeadImgNew")
@ResponseBody
public ApiResult updateHeadImgNew() {
ApiResult apiResult = new ApiResult();
String imgUrl = "";
InputStream inputStream = null;
String bendiPic = "";
try {
inputStream = getRequest().getInputStream();
//当前日期
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("YYYYMMdd");
String dateUrl = sdf.format(date);
String path="/static/imgtest/"+dateUrl;//线上路径
// String path="D://imgtest/"+dateUrl;//测试
//创建文件夹
File f = new File(path);
if(!f.exists())
f.mkdirs();
//上传图片到本地
bendiPic = path+"/"+UUIDUtil.getUUID()+".png";//线上地址
System.out.println("bendiPic:"+bendiPic);
// BufferedImage image = ImageIO.read(inputStream);
// ImageIO.write(image, "png", new File(bendiPic));
//裁切,并保存本地
ImageUtil.crop(inputStream, 420, bendiPic);
System.out.println("-----------本地保存路径：-----------"+bendiPic);
//准备key
String filename = UUIDUtil.getUUID() + ".png";
String key = upurl + dateUrl + "/" + filename;
//上传七牛
boolean flag = QiniuUtil.IVYBABY.uploadFile(key, bendiPic);
//如果上传七牛失败，则返回本地路径
if(flag){
imgUrl = BASE_QN_URL+key+"?imageView2/1/w/420";
}else{
//这里做的文件映射,用域名映射上面的真是路径/static/imgtest/xxxxx.png
imgUrl = "static.ivybaby.me/imgtest/"+bendiPic;
}
apiResult.getData().put("usIco",imgUrl);
} catch (Exception e) {
// TODO Auto-generated catch block
apiResult.setMsg("图片不能为空");
e.printStackTrace();
}
System.out.println("--------------imageUrl--------------【"+imgUrl+"】");
return apiResult;
}
@RequestMapping("/updateHeadImg")
@ResponseBody
public ApiResult updateHeadImg(String name) {
ApiResult apiResult = new ApiResult();
byte[] imageByte = null;
try {
InputStream inputStream = getRequest().getInputStream();
imageByte = org.apache.commons.io.IOUtils.toByteArray(inputStream);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 上传文件
if (imageByte.length>0) {
String filename = UUIDUtil.getUUID() + name;
String key ="";
if (upurl != null) {
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("YYYYMMdd");
String dateUrl = sdf.format(date);
key = upurl + dateUrl + "/" + filename;
}
// byte[] imageByte = this.cropBytes(image.getInputStream(), 420);
System.out.println("key------------------------"+key);
boolean flag = QiniuUtil.IVYBABY.uploadFile(key, imageByte);
System.out.println("flag:----------------"+flag);
System.out.println("上传七牛：" + flag);
apiResult.getData().put("usIco",BASE_QN_URL+key+"?imageView2/1/w/420");
} else {
apiResult.setMsg("图片不能为空");
}
System.out.println(JSON.toJSONString(apiResult));
return apiResult;
}
}
微信js：ps:这个需要和域名绑定才能生效
wx.js
function share(title,desc,link,imgUrl){
//分享给朋友圈
wx.onMenuShareTimeline({
title: title,
link: link,
imgUrl: imgUrl,
trigger: function (res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
// alert('用户点击分享到朋友圈');
},
success: function (res) {
isshow();
tongji("incrShareNum");
// alert('已分享');
},
cancel: function (res) {
// alert('已取消');
},
fail: function (res) {
// alert(JSON.stringify(res));
}
});
// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareAppMessage({
title: title,
desc: desc,
link: link,
imgUrl: imgUrl,
trigger: function (res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
// alert('用户点击发送给朋友');
},
success: function (res) {
tongji("incrShareNum");
isshow();
// alert("aa");
//alert('已分享');
},
cancel: function (res) {
//alert('已取消');
},
fail: function (res) {
//alert(JSON.stringify(res));
}
});
wx.onMenuShareQQ({
title: title,
desc: desc,
link: link,
imgUrl: imgUrl,
trigger: function (res) {
// alert('用户点击分享到QQ');
},
complete: function (res) {
// alert(JSON.stringify(res));
},
success: function (res) {
// alert('已分享');
isshow()
tongji("incrShareNum");
},
cancel: function (res) {
// alert('已取消');
},
fail: function (res) {
//alert(JSON.stringify(res));
}
});
wx.onMenuShareWeibo({
title: title,
desc: desc,
link: link,
imgUrl: imgUrl,
trigger: function (res) {
//alert('用户点击分享到微博');
},
complete: function (res) {
//alert(JSON.stringify(res));
},
success: function (res) {
tongji("incrShareNum");
isshow();
//alert('已分享');
},
cancel: function (res) {
// alert('已取消');
},
fail: function (res) {
//alert(JSON.stringify(res));
}
});
}
function isshow(){
if( $("#tip-share")!=undefined){
$("#tip-share").fadeOut(300);
}
}