当前位置: article > 正文

Canvas 图片上传，JAVA后端使用 MultipartFile 接收_html2canvas blob传到后台,java后端如何接收

作者：知新_RL | 2024-08-03 16:41:20

踩

html2canvas blob传到后台,java后端如何接收

关键点：MultipartFile 如果需要使用 originalFileName 的扩展名来在服务器端生成文件，那么需要在前端 fromData() 使用三个入参的append方法

var form=new FormData();
form.append("file",result,"aa.png");

（感谢提供的基础框架使用canvas上传图片+上传进度_邦杠的博客-CSDN博客）

<html>
<head>
<title>Canvas 文件上传</title>
</head>
<body>
<input type="file" id="myfile"/>
<canvas id="myCanvas" width="200" height="250" style="border:1px solid #d3d3d3;">

</canvas>
<button οnclick="test()">提交</button>

<img src="http://XXX/download?name=cae7319987cb486dacd1dc402f0d802d.png" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
//选择图片后
myfile.οnchange=function () {
createURLImg(myfile.files[0]);
}
var pen=myCanvas.getContext("2d");
//加载入canvas
function createURLImg(file,callback) {
var imgUrl=URL.createObjectURL(file);
var image=new Image();
image.src=imgUrl;
image.οnlοad=function (ev) {
pen.drawImage(image,0,0,200,250);
if(callback) callback();
URL.revokeObjectURL(imgUrl);
}
}
//提交按钮
function test() {
myCanvas.toBlob(function (result) {
var form=new FormData();
form.append("file",result,"aa.png");
ajax(form);
})
}

function biafenb(r) {
if(!pen) pen=myCanvas.getContext("2d");
pen.save();
pen.globalAlpha=0.3;
pen.fillRect(0,(1-r)*200,200,250);
pen.globalAlpha=1;
pen.fillStyle = "white";
pen.font = "20px 微软雅黑";
pen.textAlign='center';
pen.fillText(Math.round(r*100)+"%",100,100);
pen.restore();
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/923891