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.
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.