js实现修改图片压缩和旋转功能

// 模板代码
      <input type="file" accept="image/*" @change="handleFileChange">
      <button @click="rotateImage">旋转</button>
       <img :src="compressedImageData" v-if="compressedImageData" alt="压缩后的图片">
       <img :src="transformedImageData" v-if="transformedImageData" alt="旋转后的图片">

//js代码 vue+ts
  compressedImageData:any=null
  transformedImageData:any=null
  rotateAngle=0
  private handleFileChange(event:any) {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (e:any) => {
          const img:any = new Image();
          img.onload = () => {
              const canvas = document.createElement('canvas');
              const ctx:any = canvas.getContext('2d');

              // 计算缩放比例
              const maxWidth = 1920;
              const maxHeight = 1080;
              let width = img.width;
              let height = img.height;
              let scale = 1;

              if (width > maxWidth || height > maxHeight) {
                  scale = Math.max(maxWidth / width, maxHeight / height);
                  width *= scale;
                  height *= scale;
              }

              // 设置 canvas 尺寸并绘制图片
              canvas.width = width;
              canvas.height = height;
              ctx.drawImage(img, 0, 0, width, height);

              // 将 canvas 转换为 base64 格式的压缩图片
              this.compressedImageData= canvas.toDataURL('image/jpeg', 0.7);  // 可调整压缩质量
              // this.saveCompressedImage();
              // TODO: 在这里执行上传操作，将 compressedData 数据发送到服务器

              // 打印压缩后图片的基本信息
              console.log('原尺寸:', img.width, 'x', img.height);
              console.log('压缩尺寸:', width, 'x', height);
              console.log('压缩后大小:', this.compressedImageData.length);
          };

          img.src = e.target.result;
      };

      reader.readAsDataURL(file);
  }

  private saveCompressedImage() {
      if (!this.compressedImageData) {
          console.error('没有压缩的图片数据可供保存');
          return;
      }
      // 创建一个虚拟 <a> 元素并设置相关属性
      const link = document.createElement('a');
      link.href = this.compressedImageData;
      link.download = 'compressed_image.jpg';  // 设置下载文件的名称

      // 模拟点击下载动作
      link.click();
      // 清除虚拟元素
      link.remove();
  }

  private rotateImage(){
      this.rotateAngle+=90;
      this.applyTransformations();
  }
  private applyTransformations() {
      const img:any = new Image();
      img.onload=()=>{
          const canvas=document.createElement('canvas');
          const ctx:any= canvas.getContext('2d');
          ctx.translate(canvas.width / 2, canvas.height / 2);
          ctx.rotate(this.rotateAngle*Math.PI/180);
          ctx.drawImage(img, -img.width / 2, -img.height / 2);
          this.transformedImageData = canvas.toDataURL('image/jpeg');
      };
      img.src=this.compressedImageData;
  }