js 压缩上传图片

思路：

通过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旋转图片