关于canvas转为base64 image 图像的页面预览，上传和分享总结

最新推荐文章于 2023-06-08 16:26:02 发布

weixin_33735077

最新推荐文章于 2023-06-08 16:26:02 发布

阅读量103

点赞数

原文链接：https://my.oschina.net/yangzhiwei/blog/727499

版权

2019独角兽企业重金招聘Python工程师标准>>>

基于开源项目基础上的开发，是一件省事省力的事。

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

转载于:https://my.oschina.net/yangzhiwei/blog/727499