使用File, FormData将图片的blob数据进行图片旋转然后上传操作

if (this.currentImg && this.currentImg.path) {
this.rotateNum++;
let degree = 0;
let rotateInput = this.rotateNum * 90;
degree += parseInt(rotateInput);
degree %= 360;
let img = new Image();
img.setAttribute("crossOrigin",'Anonymous');
img.src = this.currentImg.path;
img.onload = () => {
let $w = img.width, $h = img.height, $c = document.getElementById("uploadImageCanvas");
let ctx = $c.getContext("2d");
if (degree === 90) {
$c.width = $h;
$c.height = $w;
ctx.clearRect(0, 0, $h, $w);
ctx.rotate(degree / 180 * Math.PI);
ctx.translate(0, -$h);
ctx.drawImage(img, 0, 0);
} else if (degree === 270) {
$c.width = $h;
$c.height = $w;
ctx.clearRect(0, 0, $h, $w);
ctx.rotate(degree / 180 * Math.PI);
ctx.translate(-$w, 0);
ctx.drawImage(img, 0, 0);
} else {
$c.width = $w;
$c.height = $h;
ctx.clearRect(0, 0, $w, $h);
ctx.translate($w / 2, $h / 2);
ctx.rotate(degree / 180 * Math.PI);
ctx.translate(-$w / 2, -$h / 2);
ctx.drawImage(img, $w / 2 - $w / 2, $h / 2 - $h / 2);
}
$c.toBlob((blob) => {
let fd = new FormData();
let fileBlob = new File([blob], new Date().getTime() + '.png')
fd.append("file", fileBlob);
CommonPOSThandUpload(fd).then((response) => {
if (response && response.data) {
let oRes = response.data;
if (oRes) {
this.setImgUid(oRes);
}
}
})
});
}
} else {
this.rotateNum = 0;
}
posted @ 2021-02-26 15:17  极速代码  阅读(491)  评论(0编辑  收藏  举报