html2canvas后端生成的图片,html2canvas页面生成base64，springboot后台转成图片

function createImage(name){

$("#createImage").removeClass("current_s");

var baseDiv = document.querySelector('#baseDiv');

var width = baseDiv.offsetWidth;//div宽

var height = baseDiv.offsetHeight;//div高

var canvas = document.createElement("canvas");

var content = canvas.getContext("2d");

var scale = 4.1;//放大倍数

canvas.width = width * scale;//canvas宽度

canvas.height = height * scale;//canvas高度

content.scale(scale,scale);

var rect = baseDiv.getBoundingClientRect();//获取元素相对于视察的偏移量

content.translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位

var opts = {

dpi: window.devicePixelRatio*4.1,

scale: scale,

canvas: canvas,

logging: false,//是否输出日志

width: width,

height: height

};

html2canvas(baseDiv,opts).then(function (canvas) {

var dataImg = canvas.toDataURL();

var parts = dataImg.split(';base64,');

var formJson = $("#form").serializeObject();

formJson["base64Str"]=parts[1];

formJson["imageName"]=name;

var url = basePath+"/manage/createImage";

$.ajax({

type: "post",

dataType: "json",

url: url,

contentType: 'application/json;charset=utf-8',

async: true,//异步请求

cache: false,

data: JSON.stringify(formJson),

success: function (data) {

if (data.code == 200){

location.href = basePath+data.data.url+"?imagePath="+data.data.imagePath;

}else{

$("#createImage").addClass("current_s");

alert(data.message);

}

}

});

})

}

给需要画图的div赋值id为baseDiv

//图片生成路径

@Value("${upload.path}")

private String uploadPath;

@ResponseBody

@PostMapping(value = "/manage/createImage")

public Result createImage(@RequestBody ProofResultVO proofResultVO) throws FileNotFoundException {

String base64Str = proofResultVO.getBase64Str();

String imageName = proofResultVO.getImageName();

String name = new Date().getTime()+imageName;

proofResultVO.setImagePath(uploadPath+"/"+name);

String imagePath = proofResultService.findImagePath(proofResultVO);

Mapmap = new HashMap<>();

if(StringUtils.isEmpty(imagePath)) {

//将base64生成图片

boolean flag = Base64ToImageUtil.GenerateImage(base64Str, name, uploadPath);

if (flag) {

//结果入库

proofResultService.insertImageProofResult(proofResultVO);

map.put("imagePath", uploadPath + "/" + name);

map.put("url","/manage/viewImage");

} else {

return CallbackResult.getFailResult(ResultCode.IMAGE_ERROR);

}

}else{

map.put("imagePath", imagePath);

map.put("url","/manage/viewImage");

}

return CallbackResult.getSuccessResult(map);

}

#生成图片路径

upload.path = /upload

base64转图片工具类

import org.springframework.util.ResourceUtils;

import java.io.File;

import java.io.FileNotFoundException;

import java.io.FileOutputStream;

import java.io.OutputStream;

import java.util.Base64;

/**

* Created by shenlu on 2018/11/16

*/

public class Base64ToImageUtil {

/**

* base64字符串转化成图片

* @param imgStr base64字符串

* @param imageName 图片名称

* @return

* @throws FileNotFoundException

*/

public static boolean GenerateImage(String imgStr,String imageName,String uploadPath) throws FileNotFoundException {

File path = new File(ResourceUtils.getURL("classpath:static").getPath());

if(!path.exists()) path = new File("");

File upload = new File(path.getAbsolutePath(),uploadPath);

if(!upload.exists()) upload.mkdirs();

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

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

return false;

try

{

//Base64解码

byte[] b = Base64.getDecoder().decode(imgStr.replace("\r\n", ""));

for(int i=0;i

Div中的内容，能用table排版最好用table，不然容易变形，我用的是html2canvas.js 2.1