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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39706128/article/details/84380944

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);
        Map<String, Object> map = 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<b.length;++i)
            {
                if(b[i]<0)
                {//调整异常数据
                    b[i]+=256;
                }
            }
            //生成jpeg图片
            OutputStream out = new FileOutputStream(upload+"/"+imageName);
            out.write(b);
            out.flush();
            out.close();
            return true;
        }
        catch (Exception e)
        {
            return false;
        }
    }
}

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