Canvas 图片上传，JAVA后端使用 MultipartFile 接收

最新推荐文章于 2023-08-15 17:38:59 发布

cpych

最新推荐文章于 2023-08-15 17:38:59 发布

阅读量944

点赞数 1

文章标签：前端 java

本文链接：https://blog.csdn.net/cpych/article/details/125428819

版权

关键点：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();
}

cpych

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas 图片上传，JAVA后端使用 MultipartFile 接收

关键点：MultipartFile 如果需要使用 originalFileName 的扩展名来在服务器端生成文件，那么需要在前端 fromData() 使用三个入参的append方法var form=new FormData();form.append("file",result,"aa.png");
复制链接

扫一扫