Uniapp: H5 壓縮圖片
2021-09-04 10:39:20

  uni.chooseImage...

  uni.getImageInfo({
    src: res.tempFilePaths[0],
    success: (res) => {
      const blobUrl = res.path;
      const canvas = document.createElement("canvas");

      // 減少繪制的大小才能壓縮，不然可能壓縮后圖片會變大
      canvas.width = res.width / 2;
      canvas.height = res.height / 2;

      const ctx = canvas.getContext("2d");
      let img = new Image();
      img.src = blobUrl;
      img.error = uni.hideLoading;
      img.onload = () => {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        const contentType = "image/png";
        canvas.toBlob(
          async (blob) => {
            const blobUrl2 = window.URL.createObjectURL(blob);
            await _upload(blobUrl2); // 使用uniapp的文件上傳api發送FormData數據
            window.URL.revokeObjectURL(blobUrl2);
            img = null;
          },
          contentType,
          0.5
        );
      };
    },
    fail: uni.hideLoading,
  });