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

我会带着你远行 2023-10-07 11:27 13阅读 0赞

1.引入js文件，html2canvas.js会有版本问题，这是我上传在git的版本，下载[https://github.com/zhangliqingyun/jarlist/tree/master/html2canvas][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.页面截图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70][]

下载图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1][]

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();
        }

[https_github.com_zhangliqingyun_jarlist_tree_master_html2canvas]: https://github.com/zhangliqingyun/jarlist/tree/master/html2canvas
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200320161327986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200320161418307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70