// 模板代碼
      <input type="file" accept="image/*" @change="handleFileChange">
      <button @click="rotateImage">旋轉(zhuǎn)</button>
       <img :src="compressedImageData" v-if="compressedImageData" alt="壓縮后的圖片">
       <img :src="transformedImageData" v-if="transformedImageData" alt="旋轉(zhuǎn)后的圖片">

//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');

              // 計(jì)算縮放比例
              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;
              }

              // 設(shè)置 canvas 尺寸并繪制圖片
              canvas.width = width;
              canvas.height = height;
              ctx.drawImage(img, 0, 0, width, height);

              // 將 canvas 轉(zhuǎn)換為 base64 格式的壓縮圖片
              this.compressedImageData= canvas.toDataURL('image/jpeg', 0.7);  // 可調(diào)整壓縮質(zhì)量
              // this.saveCompressedImage();
              // TODO: 在這里執(zhí)行上傳操作据途，將 compressedData 數(shù)據(jù)發(fā)送到服務(wù)器

              // 打印壓縮后圖片的基本信息
              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('沒(méi)有壓縮的圖片數(shù)據(jù)可供保存');
          return;
      }
      // 創(chuàng)建一個(gè)虛擬 <a> 元素并設(shè)置相關(guān)屬性
      const link = document.createElement('a');
      link.href = this.compressedImageData;
      link.download = 'compressed_image.jpg';  // 設(shè)置下載文件的名稱(chēng)

      // 模擬點(diǎn)擊下載動(dòng)作
      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;
  }