移动端图片压缩两种方案（Taro）

• Taro.compressImage
• canvas

Taro.compressImage

代码示例

const handleCompressImage = async (imageUrl) => {
  return new Promise(async (resolve, reject) => {
    try {
      // 下载网络图片到本地临时文件
      const downloadResult = await Taro.downloadFile({
        url: imageUrl,
        // timeout: 10000, // 可选，设置超时时间
      });

      if (downloadResult.statusCode !== 200) {
        throw new Error(`下载图片失败，错误码：${downloadResult.statusCode}`);
      }

      const { tempFilePath } = downloadResult;

      Taro.getFileInfo({
        filePath: tempFilePath,
        success: (info) => {
          console.log('原始图片大小:', info.size, `kb：${(info?.size / 1024)?.toFixed(2)}kb`,info);
        },
        fail: (error) => {
          console.error('获取压缩后图片信息失败:', error);
        },
      });


      // 使用 wx.compressImage 压缩图片
      const compressResult = await new Promise((resolveCompress, rejectCompress) => {
        Taro.compressImage({
          src: tempFilePath,
          quality: 1, // 压缩质量 1-100
          success: (res) => {
            Taro.getFileInfo({
              filePath: res.tempFilePath,
              success: (info) => {
                console.log('原始图片大小:', info.size, `kb：${(info.size / 1024)?.toFixed(2)}kb`,info);
              },
              fail: (error) => {
                console.error('获取压缩后图片信息失败:', error);
              },
            });

            resolveCompress(res.tempFilePath);
          },
          fail: (error) => {
            rejectCompress(error);
          },
        });
      });

      resolve(compressResult);
    } catch (error) {
      reject(error);
    }
  });
};

使用方法：

handleCompressImage(url)
  .then((compressedFilePath) => {
    console.log('333333压缩后的图片路径:', compressedFilePath);
    setCompressUrl(compressedFilePath)
    // 在这里可以使用compressedFilePath进行后续操作，例如上传至服务器
  })
  .catch((error) => {
    console.error('图片压缩失败:', error);
  });

canvas

代码示例

const compressImageWithCanvas = async (originalImagePath, targetWidth, targetHeight) => {
  return new Promise(async (resolve, reject) => {

    // 下载网络图片到本地临时文件
    const downloadResult = await Taro.downloadFile({
      url: originalImagePath,
      // timeout: 10000, // 可选，设置超时时间
    });

    Taro.getFileInfo({
      filePath: downloadResult.tempFilePath,
      success: (info) => {
        console.log('原始图片大小:', info.size, `kb：${(info?.size / 1024)?.toFixed(2)}kb`,info);
      },
      fail: (error) => {
        console.error('获取压缩后图片信息失败:', error);
      },
    });
    // 加载图片
    Taro.getImageInfo({
      src: originalImagePath,
      success: async (imageInfo) => {
        // 创建并配置Canvas
        const canvasWidth = 300 //imageInfo.width; // 假设目标宽度
        const canvasHeight = Math.round(imageInfo.height * (canvasWidth / imageInfo.width));
        const canvas = Taro.createCanvasContext('myCanvas');

        // Step 3: 绘制图片到Canvas
        await canvas.drawImage(downloadResult.tempFilePath, 0, 0, canvasWidth, canvasHeight);

        //test
        // canvas.setFillStyle('red');
        // canvas.fillRect(0, 0, 150, 200);

         // 执行绘制并转换为临时文件路径
        canvas.draw(false, () => {
          Taro.canvasToTempFilePath({
            canvasId: 'myCanvas',
            quality: 1,
            success: function(res: { tempFilePath: any; }) {
              Taro.getFileInfo({
                filePath: res.tempFilePath,
                success: (info) => {
                  console.log('canvas压缩图片大小:', info.size, `kb：${(info?.size / 1024)?.toFixed(2)}kb`,info);
                },
                fail: (error) => {
                  console.error('获取压缩后图片信息失败:', error);
                },
              });
              resolve(res.tempFilePath);
            },
            fail: function(err: any) {
              console.error('canvasToTempFilePath:', err);
            }
          });
        });
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}

使用方法：

compressImageWithCanvas(url)
  .then((compressedFilePath) => {
    console.log('666666压缩后的图片路径:', compressedFilePath);
    setCanvasUrl(compressedFilePath)
    // 在这里可以使用compressedFilePath进行后续操作，例如上传至服务器
  })
  .catch((error) => {
    console.error('图片压缩失败:', error);
  });

注意事项：

需要写入canvas标签

<canvas canvas-id='myCanvas'></canvas>

uniapp：

Vue.prototype.imgCompress = function(image, maxWidth, callback=function(image){return image;}){
	// #ifdef H5
	uni.getImageInfo({
		src: image,
		success: function (res) {
			let canvasWidth = res.width //图片原始长宽
			let canvasHeight = res.height;
			let base = canvasWidth/canvasHeight;
			if(canvasWidth > maxWidth){
				canvasWidth = maxWidth;
				canvasHeight = Math.floor(canvasWidth/base);
			}
			let img = new Image();
			img.src = image; // 要压缩的图片
			let canvas = document.createElement('canvas');
			let ctx = canvas.getContext('2d');
			canvas.width = canvasWidth;
			canvas.height = canvasHeight;
			//  将图片画到canvas上面   使用Canvas压缩 
			ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
			let newUrl = canvas.toDataURL('image/jpg', 0.8);
			callback(newUrl);
		}
	})
	// #endif
	// #ifndef H5
		callback(image);
	// #endif
}

//使用方法
that.imgCompress(imageSrc, 300, function(imgData){
  uni.uploadFile({
    url: that.config.host+'api/common/upload?token='+that.userinfo.token,
    filePath: imgData,
    fileType: 'image',
    name: 'file',
    formData: {},
    success: (res) => {
    },
    fail: (err) => {
      console.log('uploadImage fail', err);
    }
  });
})