html2canvas.js

Last time I talked about the conversion from html to image, using svg, and later found that third-party js with threads can be used.
The code under this maven
 <dependency>
  <groupId>org.webjars</groupId>
  <artifactId>html2canvas</artifactId>
  <version>0.4.1</version>
</dependency>
This html2canvas.js can meet the requirements, the
core Code:
    $("#submit").click(function(){
        html2canvas($("body"),{
            onrendered:function(canvas){
                  dataURL =canvas.toDataURL("image/png");
                  $.post( '/upload', {"data":dataURL}, function(json){
                      alert(json.msg);
                  }, 'json');



     Here is a click event, when the body is the content contained in the body of the entire page. Is dataURL a base64, passed to the background through this post.
     
 Background:
        String data = request.getParameter("data");
        byte[] bt = Base64.getDecoder().decode(data.substring("data:image/png;base64,".length()).getBytes() );//Intercept to base64 code
        
        String path="D:/" + new Date().getTime()+"a.png";
        System.out.println("path:" + path);
        File newFile=new File(path);
        
        try {
            FileUtils.writeByteArrayToFile(newFile, bt);//Write bt to a specific file
        } catch (IOException e) {
            result = 0;
            msg = "Upload failed";
            e.printStackTrace() ;
        }
    
    It can be seen from the above that the overall code is more brief, but a third-party js needs to be introduced. The previous method can also be completed, and the trade-off between the two should be weighed by yourself.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325213573&siteId=291194637