html2canvas截屏传入后台

最新推荐文章于 2022-07-13 10:10:10 发布

自转的轮子

最新推荐文章于 2022-07-13 10:10:10 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/qq_27818157/article/details/53195933

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="../Include/Init.jsp"%>
<%@ page contentType="text/html; charset=utf-8"%>
    <html>  
        <head>  
            <meta name="layout" content="main">  
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
            <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
            <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>   -->
               
            <%-- <script type="text/javascript" src="<%=appPath %>/supervision/html2canvas-master/dist/html2canvas.js"></script>    --%>
			<%-- <script src="<%=appPath%>/supervision/html2canvas-master/tests/assets/jquery-1.6.2.js"></script> --%>
           <script type="text/javascript" src="<%=appPath %>/supervision/html2canvas.js"></script>
           <script type="text/javascript" src="<%=appPath %>/supervision/jquery.js"></script>
          <!--  <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> -->
            <script  type="text/javascript" >  
            $(document).ready(function(){
            	  $("#example1").on("click",function(event){
                       event.preventDefault();  
                      html2canvas(document.body, {  
                      allowTaint: true,  
                      taintTest: false,  
                      onrendered: function(canvas) {  
                          canvas.id = "mycanvas";  
                          //document.body.appendChild(canvas);  
                          //生成base64图片数据  
                          var dataUrl = canvas.toDataURL(); 
                          //alert(dataUrl);
                          /* var newImg = document.createElement("img");  
                          newImg.src =  dataUrl;  
                          document.body.appendChild(newImg);  */
                          
                          
                          
                          /* var image = canvas.toDataURL("image/png").replace("image/jpeg", "image/octet-stream");   
                          window.location.href=image; */  
                          //image/png
                          /* var image    = canvas.toDataURL("image/png");  
                          var w=window.open('about:blank','image from canvas');  
                          w.document.write("<img src='"+image+"' alt='from canvas'/>"); */
                          
                          
                          var pos = dataUrl.indexOf("4")+2;
                          dataUrl = dataUrl.substring(pos, dataUrl.length - pos);//去掉Base64:开头的标识字符
                          $.ajax({
                              type: "POST",
                              url: "<%=appPath %>/supervision/base64.jsp",
                              async: false,
                              xhrFields: { withCredentials: true },
                              data: { 'base64StrImgData': dataUrl},
                              dataType: "text",
                              success: function (data) {
                                  alert(data);
                              },

                              error: function (err) {
                                  alert("error");
                              }

                          });
                      }  
                  }); 
            	  });
            	});
            
            
            </script>  
            
            
        </head>  
        <body>  
        <p>这是个p</p>
               
            Hello!  
            <div id ="div" class="" style="background-color: #abc;">  
                计算机天堂测试html5页面截图  
                <br>jsjtt.com  
            </div>  
               
            <textArea id="textArea" col="20" rows="10" ></textArea>  
            <input id="example1" type="button" value="button">  
            生成界面如下：  
        </body>  
        
    </html>

后台

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.io.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="Decoder.BASE64Decoder" %>
<%@ page import="Decoder.BASE64Encoder" %>
<%
   request.setCharacterEncoding("UTF-8");
   response.setCharacterEncoding("UTF-8");
   String base64StrImgData = request.getParameter("base64StrImgData");
   
       BASE64Decoder decoder = new BASE64Decoder();
       try {
           // Base64解码
           byte[] bytes = decoder.decodeBuffer(base64StrImgData);
           for (int i = 0; i < bytes.length; ++i) {
               if (bytes[i] < 0) {// 调整异常数据
                   bytes[i] += 256;
               }
           }
           // 生成jpeg图片
           OutputStream o = new FileOutputStream("d:\\1.jpg");
           o.write(bytes);
           o.flush();
           o.close();
       } catch (Exception e) {
       }
       response.getWriter().write("上传成功"); 

  %>

自转的轮子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html2canvas截屏传入后台

--> /supervision/html2canvas-master/dist/html2canvas.js"> --%> /supervision/html2canvas-master/tests/assets/jquery-1.6.2.js"> --%> /supervision/html2canvas
复制链接

扫一扫