H5活动页面遇到的坑+微信分享代码
2015-12-16 19:11
761 查看
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();%>
<!DOCTYPE HTML>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<meta charset="utf-8">
<meta content="width=640,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> -->
<title>制作告白书</title>
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css" >
<style>
*{ margin:0; padding:0;}
html,body { font-size: 12px; display: block; line-height: normal; font-family:"helvetica"; position: relative;}
article,aside,dialog,footer,header,section,nav,figure,menu,time,summary{ display: block; }
img{ border: 0; vertical-align: top;}
body{background: url(img/bg-repeat.png); }
.select:before{ position: absolute;top: 40px;right: 25px;width: 0;height: 0;content: '';border: 15px solid transparent; border-color: transparent;border-top-color: #F29E81; }
.upload{overflow: hidden;width: 75%;margin: 0 auto; padding: 40px 10%;}
.upload section{width: 220px;height: 220px;background: #fff;box-shadow: 0 0 15px rgba(0,0,0,0.1); text-align: center; overflow: hidden;position: relative;}
.upload section:first-child{float: left;}
.upload section:last-child{float: right;}
.upload section span{font-size: 32px;color: #F29E80; position: absolute; top: 0; width: 100%; display: block;}
.upload input{a
ppearance: none;-webkit-appearance: none;height: 100%;
width: 100%; opacity: 0;position: absolute;
z-index: 99;
left: 0;
top: 0}
.upload article{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.upload article img{width: 100%;height: auto;}
.load{width: 100%;height: 100%;background: url(img/load.gif) 50% 50% no-repeat; background-color: rgba(0,0,0,0.7); position: absolute; left: 0;top: 0;z-index: 999;}
</style>
<script type="text/javascript" src="<%=basepath %>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=basepath %>/js/tg.js"></script>
<script type="text/javascript" src="<%=basepath%>/js/yxy.js"></script>
<script type="text/javascript">
initpage("hd-gb");
</script>
</head>
<body>
<form method="post" action="<%=basepath%>/5/addConfession" enctype="multipart/form-data" onsubmit="return iframeCallback();">
<input type="hidden" id="pichidden_1" name="img1Url">
<input type="hidden" id="pichidden_2" name="img2Url">
<div style="padding: 80px 0;"><img src="img/t3.png" style="width: 100%;height: auto;"/></div>
<div style="width: 75%;margin: 0 auto;box-shadow: 0 0 15px rgba(0,0,0,0.1)">
<input type="text" id="babyNickname"
name="babyNickname"
style="
width: 95%;
padding: 0 0 0 5%;
height: 88px;
border: 0;
background: #fff;
color: #F29E80;
font-size: 32px;"
value="输入宝宝昵称"
onfocus="if (value =='输入宝宝昵称'){value =''}"
onblur="if (value ==''){value='输入宝宝昵称'}" >
</div>
<div style="width: 75%;margin: 40px auto 0;box-shadow: 0 0 15px rgba(0,0,0,0.1);position: relative;" class="select">
<select name="babyRelationship" id="babyRelationship"
style="
height: 88px;
background: #fff;
width: 100%;
-webkit-appearance: none;
border: 0;
font-size: 32px;
padding-left: 5%;
color: #F29E80;">
<option value="你是宝宝的...">你是宝宝的...</option>
<option value="爸爸">爸爸</option>
<option value="妈妈">妈妈</option>
<option value="其他人">其他亲友</option>
</select>
</div>
<div class="upload">
<section>
<article>
<div class="wu-example">
<div id="fileList" class="uploader-list"></div>
<span id="picker">照片1</span>
</div>
<div id="thumb"></div>
</article>
<div class="load" id="loading1" style="display: none"></div>
</section>
<section>
<article>
<div class="wu-example">
<div id="fileList" class="uploader-list"></div>
<span id="picker2">照片2</span>
</div>
<div id="thumb2"></div>
</article>
<div class="load" id="loading2" style="display: none"></div>
</section>
</div>
<div style="width: 75%;margin: 0 auto;padding: 50px 0 75px;">
<a href="javascript:void(0)"
style="display: block;
height: 99px;
line-height: 99px;
text-align: center;
color: #fff;
font-size: 36px;
margin:0 0 50px;
background: #4FC6A4;
text-decoration: none;"
onclick="clickSubmit();"
>分享并查看</a>
</div>
</form>
<script type="text/javascript" src="webuploader/webuploader.nolog.min.js"></script>
<script src="../html5/test/js/ostype.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="<%=basepath %>/js/share.js"></script>
<script type="text/javascript">
$("#pichidden_1").val("");
$("#pichidden_2").val("");
$(document).ready(function(){
var serverUrl ;//默认值
// alert("1");
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
// alert("安卓手机");
serverUrl = "/hd/5/updateHeadImgNew";
// window.location.href = "mobile/index.html";
} else if (u.indexOf('iPhone') > -1) {//苹果手机
// window.location.href = "mobile/index.html";
serverUrl = "/hd/5/updateHeadImg";
// alert("苹果手机");
} else if (u.indexOf('Windows Phone') > -1) {//winphone手机
// alert("winphone手机");
serverUrl = "/hd/5/updateHeadImg";
// window.location.href = "mobile/index.html";
}else{
serverUrl = "/hd/5/updateHeadImg";
}
// alert(serverUrl);
// var error1 = false;
// var error2 = false;
var uploader = WebUploader.create({
// swf文件路径
swf: 'webuploader/Uploader.swf',
auto: true,
// 文件接收服务端。
server: serverUrl,//本地测试地址
// server: '/hd/5/updateHeadImgNew',//线上地址
fileVal :'image',
//缩略图
thumb:{
width: 220,
height: 220,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: true,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: 'image/jpeg'
},
compress:{
width: 1000,
height: 1000,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 0
},
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: true,
//目前移动端有几个重要的 bug 在此列出来以免大家踩坑。
/*
上传请求内容为空，这是 android 4 的一个bug，只要 file 的 blob数据修改过，通过 xhr2 去发送就有这个问题。 详情：https://code.google.com/p/android/issues/detail?id=39882
解决方案： 发送的时候采用二进制方案，即 把 sendAsBinary 设置成true, 通过这种方式可以避免这个问题。后端接受需要小改动一下。
*/
sendAsBinary:true,
fileNumLimit:1,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
uploader.on( 'fileQueued', function( file ) {
uploader.makeThumb( file, function( error, ret ) {
if ( error ) {
$li.text('预览错误');
} else {
$("#picker").first("div").html("");
$("#thumb").html('<img alt="" src="' + ret + '" />');
$("#loading1").show();
}
});
});
uploader.on( 'uploadSuccess', function( file,result ) {
$( '#'+file.id ).addClass('upload-state-done');
var qiuniuurl1 = result.data.usIco;
$("#pichidden_1").val(qiuniuurl1);
$("#loading1").hide();
});
var uploader2 = WebUploader.create({
// swf文件路径
swf: 'webuploader/Uploader.swf',
auto: true,
// 文件接收服务端。
server: serverUrl,//本地
// server: '/hd/5/updateHeadImgNew',// 线上
fileVal :'image',
//缩略图
thumb:{
width: 220,
height: 220,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: true,
// 是否允许裁剪。
crop: true,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: 'image/jpeg'
},
compress:{
width: 500,
height: 500,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 0
},
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker2',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: true,
sendAsBinary:true,
fileNumLimit:1,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
uploader2.on( 'fileQueued', function( file ) {
uploader2.makeThumb( file, function( error, ret ) {
if ( error ) {
$li.text('预览错误');
} else {
// if(!error2){
$("#picker2").first("div").html("");
// }
$("#thumb2").html('<img alt="" src="' + ret + '" />');
$("#loading2").show();
}
});
});
uploader2.on( 'uploadSuccess', function( file,result ) {
var qiuniuurl2 = result.data.usIco;
$("#pichidden_2").val(qiuniuurl2);
$("#loading2").hide();
});
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
$.ajax({
type: "post",
url: "/hd/common/getWeixinInfo",
data:{
url:""+window.location
},
success: function(msg){
reg(msg);
}
});
title1 = "陪伴是最长情的告白";
desc1 = "2015年最大的收获是什么？我终于找到了答案，那就是……";
image1 = "http://qn.ivybaby.me/@/hd/tu1.jpg";
link1= "http://m.drcuiyutao.com/hd/5/gb";
wx.ready(function () {
//默认的图片和文案
//默认的图片和文案
share(title1,desc1,link1,image1);
});
function iframeCallback(){
var babyNickName = $("#babyNickname").val().trim();
if(babyNickName==null||babyNickName==""||babyNickName=="输入宝宝昵称"){
alert("昵称不能为空");
return false;
}
if(babyNickName.length>200){
alert("昵称不能超过200");
return false;
}
var babyRelationship = $("#babyRelationship").val();
if(babyRelationship=="你是宝宝的..."){
alert("请选择于宝宝的关系");
return false;
}
var pic1 = $("#pichidden_1").val();
var pic2 = $("#pichidden_2").val();
if(pic1==""||pic1.length==0){
alert("照片1没上传");
return false;
}
if(pic2==""||pic2.length==0){
alert("照片2没上传");
return false;
}
webclick('c');
return true;
}
function clickSubmit(){
$("form").submit();
}
function reg(ret){
wx.config({
debug: false,
appId: 'wx75e7a5ac23efd495',
timestamp: ret.timestamp,
nonceStr: ret.nonceStr,
signature: ret.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
}
</script>
</body>
</html>
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);
}
}
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();%>
<!DOCTYPE HTML>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<meta charset="utf-8">
<meta content="width=640,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> -->
<title>制作告白书</title>
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css" >
<style>
*{ margin:0; padding:0;}
html,body { font-size: 12px; display: block; line-height: normal; font-family:"helvetica"; position: relative;}
article,aside,dialog,footer,header,section,nav,figure,menu,time,summary{ display: block; }
img{ border: 0; vertical-align: top;}
body{background: url(img/bg-repeat.png); }
.select:before{ position: absolute;top: 40px;right: 25px;width: 0;height: 0;content: '';border: 15px solid transparent; border-color: transparent;border-top-color: #F29E81; }
.upload{overflow: hidden;width: 75%;margin: 0 auto; padding: 40px 10%;}
.upload section{width: 220px;height: 220px;background: #fff;box-shadow: 0 0 15px rgba(0,0,0,0.1); text-align: center; overflow: hidden;position: relative;}
.upload section:first-child{float: left;}
.upload section:last-child{float: right;}
.upload section span{font-size: 32px;color: #F29E80; position: absolute; top: 0; width: 100%; display: block;}
.upload input{a
ppearance: none;-webkit-appearance: none;height: 100%;
width: 100%; opacity: 0;position: absolute;
z-index: 99;
left: 0;
top: 0}
.upload article{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.upload article img{width: 100%;height: auto;}
.load{width: 100%;height: 100%;background: url(img/load.gif) 50% 50% no-repeat; background-color: rgba(0,0,0,0.7); position: absolute; left: 0;top: 0;z-index: 999;}
</style>
<script type="text/javascript" src="<%=basepath %>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=basepath %>/js/tg.js"></script>
<script type="text/javascript" src="<%=basepath%>/js/yxy.js"></script>
<script type="text/javascript">
initpage("hd-gb");
</script>
</head>
<body>
<form method="post" action="<%=basepath%>/5/addConfession" enctype="multipart/form-data" onsubmit="return iframeCallback();">
<input type="hidden" id="pichidden_1" name="img1Url">
<input type="hidden" id="pichidden_2" name="img2Url">
<div style="padding: 80px 0;"><img src="img/t3.png" style="width: 100%;height: auto;"/></div>
<div style="width: 75%;margin: 0 auto;box-shadow: 0 0 15px rgba(0,0,0,0.1)">
<input type="text" id="babyNickname"
name="babyNickname"
style="
width: 95%;
padding: 0 0 0 5%;
height: 88px;
border: 0;
background: #fff;
color: #F29E80;
font-size: 32px;"
value="输入宝宝昵称"
onfocus="if (value =='输入宝宝昵称'){value =''}"
onblur="if (value ==''){value='输入宝宝昵称'}" >
</div>
<div style="width: 75%;margin: 40px auto 0;box-shadow: 0 0 15px rgba(0,0,0,0.1);position: relative;" class="select">
<select name="babyRelationship" id="babyRelationship"
style="
height: 88px;
background: #fff;
width: 100%;
-webkit-appearance: none;
border: 0;
font-size: 32px;
padding-left: 5%;
color: #F29E80;">
<option value="你是宝宝的...">你是宝宝的...</option>
<option value="爸爸">爸爸</option>
<option value="妈妈">妈妈</option>
<option value="其他人">其他亲友</option>
</select>
</div>
<div class="upload">
<section>
<article>
<div class="wu-example">
<div id="fileList" class="uploader-list"></div>
<span id="picker">照片1</span>
</div>
<div id="thumb"></div>
</article>
<div class="load" id="loading1" style="display: none"></div>
</section>
<section>
<article>
<div class="wu-example">
<div id="fileList" class="uploader-list"></div>
<span id="picker2">照片2</span>
</div>
<div id="thumb2"></div>
</article>
<div class="load" id="loading2" style="display: none"></div>
</section>
</div>
<div style="width: 75%;margin: 0 auto;padding: 50px 0 75px;">
<a href="javascript:void(0)"
style="display: block;
height: 99px;
line-height: 99px;
text-align: center;
color: #fff;
font-size: 36px;
margin:0 0 50px;
background: #4FC6A4;
text-decoration: none;"
onclick="clickSubmit();"
>分享并查看</a>
</div>
</form>
<script type="text/javascript" src="webuploader/webuploader.nolog.min.js"></script>
<script src="../html5/test/js/ostype.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="<%=basepath %>/js/share.js"></script>
<script type="text/javascript">
$("#pichidden_1").val("");
$("#pichidden_2").val("");
$(document).ready(function(){
var serverUrl ;//默认值
// alert("1");
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
// alert("安卓手机");
serverUrl = "/hd/5/updateHeadImgNew";
// window.location.href = "mobile/index.html";
} else if (u.indexOf('iPhone') > -1) {//苹果手机
// window.location.href = "mobile/index.html";
serverUrl = "/hd/5/updateHeadImg";
// alert("苹果手机");
} else if (u.indexOf('Windows Phone') > -1) {//winphone手机
// alert("winphone手机");
serverUrl = "/hd/5/updateHeadImg";
// window.location.href = "mobile/index.html";
}else{
serverUrl = "/hd/5/updateHeadImg";
}
// alert(serverUrl);
// var error1 = false;
// var error2 = false;
var uploader = WebUploader.create({
// swf文件路径
swf: 'webuploader/Uploader.swf',
auto: true,
// 文件接收服务端。
server: serverUrl,//本地测试地址
// server: '/hd/5/updateHeadImgNew',//线上地址
fileVal :'image',
//缩略图
thumb:{
width: 220,
height: 220,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: true,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: 'image/jpeg'
},
compress:{
width: 1000,
height: 1000,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 0
},
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: true,
//目前移动端有几个重要的 bug 在此列出来以免大家踩坑。
/*
上传请求内容为空，这是 android 4 的一个bug，只要 file 的 blob数据修改过，通过 xhr2 去发送就有这个问题。 详情：https://code.google.com/p/android/issues/detail?id=39882
解决方案： 发送的时候采用二进制方案，即 把 sendAsBinary 设置成true, 通过这种方式可以避免这个问题。后端接受需要小改动一下。
*/
sendAsBinary:true,
fileNumLimit:1,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
uploader.on( 'fileQueued', function( file ) {
uploader.makeThumb( file, function( error, ret ) {
if ( error ) {
$li.text('预览错误');
} else {
$("#picker").first("div").html("");
$("#thumb").html('<img alt="" src="' + ret + '" />');
$("#loading1").show();
}
});
});
uploader.on( 'uploadSuccess', function( file,result ) {
$( '#'+file.id ).addClass('upload-state-done');
var qiuniuurl1 = result.data.usIco;
$("#pichidden_1").val(qiuniuurl1);
$("#loading1").hide();
});
var uploader2 = WebUploader.create({
// swf文件路径
swf: 'webuploader/Uploader.swf',
auto: true,
// 文件接收服务端。
server: serverUrl,//本地
// server: '/hd/5/updateHeadImgNew',// 线上
fileVal :'image',
//缩略图
thumb:{
width: 220,
height: 220,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: true,
// 是否允许裁剪。
crop: true,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: 'image/jpeg'
},
compress:{
width: 500,
height: 500,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 0
},
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker2',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: true,
sendAsBinary:true,
fileNumLimit:1,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
uploader2.on( 'fileQueued', function( file ) {
uploader2.makeThumb( file, function( error, ret ) {
if ( error ) {
$li.text('预览错误');
} else {
// if(!error2){
$("#picker2").first("div").html("");
// }
$("#thumb2").html('<img alt="" src="' + ret + '" />');
$("#loading2").show();
}
});
});
uploader2.on( 'uploadSuccess', function( file,result ) {
var qiuniuurl2 = result.data.usIco;
$("#pichidden_2").val(qiuniuurl2);
$("#loading2").hide();
});
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
$.ajax({
type: "post",
url: "/hd/common/getWeixinInfo",
data:{
url:""+window.location
},
success: function(msg){
reg(msg);
}
});
title1 = "陪伴是最长情的告白";
desc1 = "2015年最大的收获是什么？我终于找到了答案，那就是……";
image1 = "http://qn.ivybaby.me/@/hd/tu1.jpg";
link1= "http://m.drcuiyutao.com/hd/5/gb";
wx.ready(function () {
//默认的图片和文案
//默认的图片和文案
share(title1,desc1,link1,image1);
});
function iframeCallback(){
var babyNickName = $("#babyNickname").val().trim();
if(babyNickName==null||babyNickName==""||babyNickName=="输入宝宝昵称"){
alert("昵称不能为空");
return false;
}
if(babyNickName.length>200){
alert("昵称不能超过200");
return false;
}
var babyRelationship = $("#babyRelationship").val();
if(babyRelationship=="你是宝宝的..."){
alert("请选择于宝宝的关系");
return false;
}
var pic1 = $("#pichidden_1").val();
var pic2 = $("#pichidden_2").val();
if(pic1==""||pic1.length==0){
alert("照片1没上传");
return false;
}
if(pic2==""||pic2.length==0){
alert("照片2没上传");
return false;
}
webclick('c');
return true;
}
function clickSubmit(){
$("form").submit();
}
function reg(ret){
wx.config({
debug: false,
appId: 'wx75e7a5ac23efd495',
timestamp: ret.timestamp,
nonceStr: ret.nonceStr,
signature: ret.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
}
</script>
</body>
</html>
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);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 微信分享自定义图片
- SAE+Servlet+JSP实现微信公众平台OAuth2.0网页授权的使用
- Android之微信支付功能
- 36选7小程序
- 腻人的微信营销
- 手把手教你微信支付
- 微信企业号开发八：JSAPI模式之身份验证接口
- Android ActionBar应用实战，高仿微信主界面的设计
- 微信企业号开发七：JSAPI模式
- android集成支付，支付宝，微信
- 微信企业号开发六：回调模式之消息回复
- 微信移动支付V3开发详细教程服务端采用.net mvc webapi（C#）
- 防微信底部标题栏
- 透彻分析微信公众平台三大矛盾
- 玩转AWS CloudWatch微信告警
- 玩转AWS CloudWatch微信告警
- 微信朋友圈技术之道：三个人的后台团队与每日十亿的发布量
- 微信企业号开发五：回调模式
- Android 微信抢红包插件
- 微信企业号开发四：文件上传到微信服务器