继我的上一篇博客——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, "");
}
}