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

最新推荐文章于 2024-08-16 16:55:01 发布

小小一只猿

最新推荐文章于 2024-08-16 16:55:01 发布

阅读量5.3k

点赞数 1

分类专栏：其他

本文链接：https://blog.csdn.net/qq_39706128/article/details/84380944

版权

本文介绍了如何使用html2canvas将页面div内容转换为Base64字符串，并在SpringBoot后端将其转换为图片。建议在div中使用table进行内容布局以避免变形。

摘要由CSDN通过智能技术生成

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) {