html2canvas生成的图片数据太大传不到后台之解决方法————js转成文件传给后台

继我的上一篇博客——https://blog.csdn.net/Sun_of_Rainy/article/details/86693056

现在来解决问题，解决思路（同事帮忙想出来的，我来学习哈，顺便记录下）是通过js将数据放到文件中，将文件传给后台

将画布数据转成文件的方法

我的js截图方法代码贴出来：

function saveUserTemplateAsImageData(){
     var userTemplateId = parent.window.templateId;
     var pic;
     var dataUrl ;
     var canvas2 = document.createElement("canvas");    　　　　　　　//创建一个新的canvas
     let _canvas = document.querySelector('#main');　　　　　 //这里面填写 你需要截图的div
     var w = parseInt(window.getComputedStyle(_canvas).width);
     var h = parseInt(window.getComputedStyle(_canvas).height);
     canvas2.width = w;
     canvas2.height = h;　　　　　　　　　　　　　　//将canvas画布放大2倍或者更多，然后盛放在较小的容器内，就显得不模糊了
     canvas2.style.width = w + "px";
     canvas2.style.height = h + "px";
     
     var context = canvas2.getContext("2d");
     context.scale(1, 1);      　//指图片偏移
     html2canvas(document.querySelector('#main'), {  　　//写需要截图的div
         taintTest: false,
        useCORS: true,
         allowTaint: false, 　　//这三串代码解决跨域问题
         canvas: canvas2
     }).then(
         function (canvas) {
            dataUrl = canvas.toDataURL("image/png");
            var arr = dataUrl.split(',')
            var mime = arr[0].match(/:(.*?);/)[1]
            var suffix = mime.split('/')[1]
            var bstr = atob(arr[1])
            var n = bstr.length
            var u8arr = new Uint8Array(n)
            var filename="temp_img";
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
            }
            var file =  new File([u8arr], `${filename}.${suffix}`, {type: mime});
            var formdata = new FormData();
            formdata.append("file",file)
             $.ajax({
                 url: url + "api/file/uploadImgFile?type=img&userTemplateId="+userTemplateId,//路径 
                 type: "POST",
                 data: formdata,
                 contentType: false,
                 multiple: true,
                 processData: false,
                 success: function (data) {

                 },
                 error: function (error) {
                    // console.log(error)
                 }
               });

         });
}

后台是如何获取的呢，贴代码

 @PostMapping(value = "/uploadImgFile")
 @DataSame
 public @ResponseBody Map<String, Object> createImg(@RequestParam(value = "file") MultipartFile file,String type,HttpServletRequest request, final HttpServletResponse response,String token)
   throws Exception {
  String userTempId = request.getParameter("userTemplateId");               //获取用户的模板id
  UserTemp t1  = fileService.selectByPrimaryKey(Long.parseLong(userTempId));//找到用户模板
  FileOutputStream outputStream= null;
  InputStream inputStream =null;
  long beforeUpdateTime = 0L;   //截图数据文件更新之前的时间
  long afterUpdateTime = 0L;    //截图数据文件更新之后的时间
  File sf=null;
  try {
   
         inputStream = file.getInputStream();                                   //读前台传过来的文件
   sf =new File(ConfigUtil.getValue("template.source.path") + t1.getField1());
   sf.delete();                                                           //将原来的图片文件删掉
   beforeUpdateTime = sf.lastModified();
   
   /*
    * 创建和原来图片相同名字的文件，并写入最新的内容
    */
   outputStream = new FileOutputStream(sf);                               
   byte[] buffer = file.getBytes();
   int byteread = 0;
   while ((byteread = inputStream.read(buffer)) != -1) {
    outputStream.write(buffer, 0, byteread);
    outputStream.flush();
   }
   
  } catch (IOException e) {
   e.printStackTrace();
  } finally {
   if (outputStream != null) {
    try {
     outputStream.close();
    } catch (IOException e) {
     e.printStackTrace();
    }
   }
   if (inputStream != null) {
    try {
     inputStream.close();
    } catch (IOException e) {
     e.printStackTrace();
    }
   }
  }
  afterUpdateTime = sf.lastModified();                    //判断文件是否更新成功
  if (beforeUpdateTime < afterUpdateTime) {
   return ResultUtil.put(ConstantUtil.REQUEST_SUCCESS, ConstantUtil.ADD_SUCCESS_MSG, "");
  } else {
   return ResultUtil.put(ConstantUtil.REQUEST_FAIL, ConstantUtil.ADD_FAILURE_MSG, "");
  }
 }