java+springmvc+html2cavas转化图片后台处理

一．Html2cavas工具转图像传输base64码通过ajax生成图片

Html2cavas引用

Es6解决ie11上不能使用html2cavas不能截图的问题

引入js

<script type="text/javascript"src="<%=basePath %>es6promise/es6-promise.js"></script>

         <scripttype="text/javascript" src="<%=basePath%>es6promise/es6-promise.auto.js"></script>

   <script type="text/javascript" src="<%=basePath%>/js/html2canvas.js"></script>

 

前端：

function jietu2(){

     $("#lx").val("1");

     var imageid=$("#imageid1");

     var imageid2=$("#imageid2");

     if(imageid!=null) imageid.remove();

     if(imageid2!=null) imageid2.remove();

     $("#allmap2").hide();

     var targetDom=$('#food_con1');//  document.getElementById('food_con1');

     //var copyDom = targetDom.clone();   

        //copyDom.width(targetDom.width() + "px");   

       // copyDom.height(targetDom.height() + "px"); 

      html2canvas(targetDom, {

        allowTaint : false,

        taintTest: false,

         useCORS:true,

           onrendered: function(canvas) {

           var image =new Image();

           var imageemail =new Image();

           image.src=canvas.toDataURL();

           imageemail.src=canvas.toDataURL();

           varcutimgbase64=cutimageandreturnbase64(imageemail.src);

           if(cutimgbase64!=""){

               image.src=cutimgbase64;

               imageemail.src=cutimgbase64;

           }

           image.width=900;

           image.height=400;

           image.id="imageid1";

           imageemail.width=600;

            imageemail.height=400;

           imageemail.id="imageid2";

           $("#readdress").text("方位图");

               $("#nowloc").html("");

               $("#emailloc").text("方位图");

           $("#readdress").after(image);

           $("#emailloc").after(imageemail);

               //document.getElementById('readdress').appendChild(image);

           },

         // width: 300,

         // height: 300

       });

}

 

通过ajax发去图片base64数据

function cutimageandreturnbase64(data){

     //将data中的特殊符号替换

     var base64="";

     data = data.replace(/\+/g,"%2B");

        data = data.replace(/\=/g,"&3D");

     data=encodeURI(encodeURI(data));

     $.ajax({

        type:"POST",

            url:"<%=basePath%>materialmake/cutimage.dhtml",

            data:"src="+data,

            async:false,

            success:function(msg){

               if(msg!='failure'){

                  base64=msg;

               }else{

                  alert("切图失败！");

               }

            }

           

     });

  returnbase64;

    }

 

后台处理生成数据：

/***后台处理平面图并切图*/

   @RequestMapping(value="cutimage.dhtml",method={RequestMethod.POST})

   @ResponseBody

   public String cutimage(Stringsrc,HttpServletRequest request,HttpServletResponse response) throws IOException, Exception{

      Stringwaitreplace="data:image/png;base64,";

      src=URLDecoder.decode(URLDecoder.decode(src,"UTF-8"),"GBK");

      src=src.replace(waitreplace,"");

      Stringfilepath="d://tmp.png";

      if(GenerateImage(src)){

         ImageUtilcututil=new ImageUtil();

         //切图工具类实现切图

         cututil.cutImage(filepath,filepath, 420, 0, 1200, 800);

         Stringbase64=Base64toImagUtil.getImageStr("d://cut__tmp.png");

         returnbase64;

      } else{

         return"failure";

      }    

  }

 

生成图片：

//base64字符串转化成图片 

   publicstaticbooleanGenerateImage(StringimgStr) throwsIOException 

   {   //对字节数组字符串进行Base64解码并生成图片 

        if (imgStr ==null)//图像数据为空 

            return false;

        sun.misc.BASE64Decoder decoder = newsun.misc.BASE64Decoder(); 

        try  

        { 

            //Base64解码 

        //生成jpeg图片 

            String imgFilePath ="d://tmp.png";//新生成的图片 

        OutputStreamout= newFileOutputStream(imgFilePath);

            byte[]b = decoder.decodeBuffer(imgStr);

            for(inti=0;i<b.length;i++)

            { 

                if(b[i]<0) 

                {//调整异常数据 

                    b[i]+=256; 

                } 

            }    

            out.write(b); 

            out.flush(); 

            out.close(); 

            return true; 

        }  

        catch (Exceptione)  

        { 

        e.printStackTrace();

            return false; 

        } 

    }

Base64加密解密工具类

切图工具类

 

切图工具类所使用的jar包

工具类在此不能显示，请前往 百度文库有我的文章   带附件

https://wenku.baidu.com/view/b16dc96a02d8ce2f0066f5335a8102d277a2611d