首页 > 移动平台 > 详细

Uniapp: H5 压缩图片

时间:2021-09-05 20:24:58      阅读:38      评论:0      收藏:0      [点我收藏+]
  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,
  });

Uniapp: H5 压缩图片

原文:https://www.cnblogs.com/ajanuw/p/15225713.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!