html2canvas.js把html页面元素转成图片下载本地、上传服务器，处理图片模糊失真

1.引入js文件，html2canvas.js会有版本问题，这是我上传在git的版本，下载https://github.com/zhangliqingyun/jarlist/tree/master/html2canvas，头部引入文件

2.页面table元素：

3.js文件处理（下载到本地），模糊是由于scale的倍数设置必须为2的倍数

$(document).ready(function(){

   $("#btn-Convert-Html2Image").on('click', function () {
var width = $('#table').outerWidth(); //截图元素的宽
var height = $('#table').outerHeight(); //截图元素的高
var canvas = document.createElement("canvas"); //创建画板
var context = canvas.getContext("2d");
var scale = 2; //设置为2的整数倍，2/4/6/8才出现不模糊的情况
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
dpi: window.devicePixelRatio * 4,
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
width: width,
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(document.querySelector("#table"), opts).then(canvas => {
var imgageData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", imgageData);
});
   });

});

4.页面截图

html2canvas.js把html页面元素转成图片下载本地、上传服务器，处理图片模糊失真

下载图片

html2canvas.js把html页面元素转成图片下载本地、上传服务器，处理图片模糊失真

5.上传到本地服务器，使用ajax把生成的图片base64字符串传递到后台保存

   //上传table截图
   function uploadPic(){
       var width = $('#table').outerWidth(); //截图元素的宽
var height = $('#table').outerHeight(); //截图元素的高
var canvas = document.createElement("canvas"); //创建画板
var context = canvas.getContext("2d");
var scale = 2; //设置为2的整数倍，2/4/6/8才出现不模糊的情况
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
dpi: window.devicePixelRatio * 4,
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
width: width,
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(document.querySelector("#table"), opts).then(canvas => {
var imgageData = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
uploadPicByUrl(imgageData);//通过url上传图片
});
   }

   //通过url上传图片
   function uploadPicByUrl(imgageData){
       var orgCode = mini.get("orgCode").getValue();
       $.ajax({
    url: basePath+"gjHighItem111/savePic",
            type: 'post',
    data: {"data":imgageData,"picName":"H"+orgCode+"111.png"},
    cache: false,
    success: function (successData) {
        var message = mini.decode(successData);
        var msg = message.msg;//获取组织xxID，用于树节点定位
        if(message.type == '200'){
        showMsg("图片保存成功","success",800,"center","center");
        }else{
            showMsg("图片保存失败","warning",800,"center","center");
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        showMsg("图片保存错误","danger",800,"center","center");
    }
    });
   }

6.后台接收代码

controller层：

@RequestMapping(value = "savePic", method = { RequestMethod.POST })
   public String savePic(HttpServletRequest request){
       String data = request.getParameter("data");
       String picName = request.getParameter("picName");
       return gjHighItem111Service.savePic(data,picName);
   }

service层：PicUploadUtils.picPath为服务器路径，Base64字符串转成byte

public String savePic(String data, String picName) {
       try {
           byte[] bytes = new Base64().decodeBase64(data); //将字符串转换为byte数组
ByteArrayInputStream inputStreamArr = new ByteArrayInputStream(bytes); //要注意向后台传base64字符串时,要去掉 data:image/jpeg;base64, 前缀
       InputStream inputStream = new BufferedInputStream(inputStreamArr); //把output流数组转成input流
           File dir = new File(PicUploadUtils.picPath);
           if (!dir.exists()) {
               dir.mkdirs();
   }
           FileOutputStream fileOutputStream =new FileOutputStream(PicUploadUtils.picPath+picName);
           //创建一个缓冲区
           byte buffer[] = new byte[1024];
           //判断输入流是否已经读完的标识
           int len = 0;
           while ((len=inputStream.read(buffer))>0)
       {
       fileOutputStream.write(buffer,0,len);
       }
           inputStream.close();
           fileOutputStream.close();
       } catch (Exception e) {
           return new Message(Message.ERROR, "添加失败").toJson();
       }
       return new Message(Message.OK, "添加成功").toJson();
   }

html2canvas.js把html页面元素转成图片下载本地、上传服务器，处理图片模糊失真

相关推荐