思路：
- 通过input标签获取本地图片
- 把获取到的图片转换成base64格式（canvas只能处理base64格式的图片）
- 通过canvas的API把图片压缩大小后再生成图片。
- 把压缩后的base64图片转成Blob的二进制流文件。
- 通过FormData 表单上传的形式提交至后端。
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8" /> <title>压缩图片demo</title> </head> <body> <img id="img" src="" /> <input id="file" type="file" onchange="compress()" /> </body> <script> // 对图片进行压缩 function compress() { let fileObj = document.getElementById("file").files[0]; //上传文件的对象 let reader = new FileReader(); reader.readAsDataURL(fileObj); reader.onload = function (e) { let image = new Image(); image.src = e.target.result; image.onload = function () {
let canvas = document.createElement("canvas"),
context = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width / 2, image.height / 2);
//预览图片
let base64img = "";
base64img = canvas.toDataURL("image/jpeg");
document.getElementById("img").src = base64img;
// 上传
var fileData = new FormData();
fileData.append("file", convertBase64UrlToBlob(base64img));
axios.post(url,fileData).then(
//上传成功！
);
};
};
}
/**
* 将base64的图片转换为Blob
*/
function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
</script> </html>
附外链：https://blog.csdn.net/a8725585/article/details/84867040 canvas旋转图片