基于开源项目基础上的开发,是一件省事省力的事。
html:
<button id="saveImageBtn" class="btn btn-info">预览|重拍</button>
<input type="hidden" value="上传照片,不能删除" id="uploadifyBtn"/><br>
<img id="img" src=''>
javascript:
<#--网页截图-->
<script type="text/javascript">
$(function(){
var saveButton = document.getElementById("saveImageBtn");
bindButtonEvent(saveButton, "click", saveImageInfo);
});
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
element.attachEvent('on'+type, handler);
}
}
<#--提供预览 : 将canvas转成base64 image-->
function saveImageInfo ()
{
var mycanvas = document.getElementById("output");
var image = mycanvas.toDataURL("image/png");
$("#img").attr("src",image);
//var w=window.open('about:blank','image from canvas');
//w.document.write("<img src='"+image+"' alt='from canvas'/>");
}
</script>
<#-- 分享图片 ajax上传 -->
<script type="text/javascript">
$(document).ready(function() {
$("#uploadifyBtn").bind("click",function(){
$.ajax({
type: "POST",
url: "${basepath}/common/uploadifyUser.do",
async: false,
xhrFields: { withCredentials: true },
data: { 'base64StrImgData': $("#img").attr("src")},
dataType: "json",
success: function (data) {
var jsonObj = eval(data);
//alert(data.filePath);
$("#shareUrl").attr("value","${systemSetting().imageRootPath}"+data.filePath);
//alert($("#shareUrl").attr("value"));
//domUtils.on(iframe, 'load', callback);
},
error: function (err) {
alert("error!!!!");
alert(err.responseText);
}
});
});
});
</script>
<!-- 百度分享 bdSnsKey -->
<script>
<#--分享前,模拟点击保存按钮trigger-->
function SetSharePic(cmd, config) {
if($("#shareUrl").attr("value")!=""||$("#shareUrl").attr("value")!=null){
$("#uploadifyBtn").trigger("click");//模拟鼠标点击,并隐藏button按钮。
}
return {bdPic:$("#shareUrl").attr("value")}
}
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"核桃网(www.hetao3d.com)","bdDesc" : "【嘿】我发现了一个很好玩的网站", "bdUrl": "http://xxx.xxx.xxx.xx:8080/jshop/product/10263.html","bdPic":"",onBeforeClick:SetSharePic,"bdMini":"2","bdMiniList":false,"bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"0","bdPos":"right","bdTop":"100"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<!-- Baidu Button END -->
服务端:(CommonController.java)
把传来的base64String 转码后保存
//以下只是核心代码
File uploadedFile3 = new File(savePath, newFileName3);
//保存字节流
try {
// 解码,然后将字节转换为文件
byte[] bytes = new BASE64Decoder().decodeBuffer(filedata); //将字符串转换为byte数组
ByteArrayInputStream in = new ByteArrayInputStream(bytes);
byte[] buffer = new byte[1024];
FileOutputStream out = new FileOutputStream(uploadedFile3);
int bytesum = 0;
int byteread = 0;
while ((byteread = in.read(buffer)) != -1) {
bytesum += byteread;
out.write(buffer, 0, byteread); //文件写操作
}
} catch (IOException ioe) {
ioe.printStackTrace();
}
到这里,终于完成了。
---本贴链接请保留 http://my.oschina.net/yangzhiwei/blog/727499
参考 http://blog.csdn.net/a9529lty/article/details/6563499