taro图片上传压缩

原创

于 2022-06-21 17:47:33 发布

· 1.1k 阅读

0 ·

版权

文章标签：

#前端 #javascript

该博客介绍了一个使用Taro开发H5时压缩上传图片的方法。通过创建canvas元素，利用drawImage方法进行图片压缩，并使用FileReader读取文件，最终将压缩后的图片数据URL进行上传。代码示例展示了如何在用户选择照片后调用compressImage函数进行压缩，并将压缩后的图片发送到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：taro开发h5，需要压缩上传图片，利用canvas绘制进行压缩

一、压缩图片的JS

function _compressedImage(img) {
  const canvas = document.createElement("canvas");
  const ct = canvas.getContext("2d");
  const canvasWidth = img.width / 2;
  const canvasHeight = img.height / 2;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  ct.drawImage(img, 0, 0, canvasWidth, canvasHeight);
  const dataUrl = canvas.toDataURL("image/jpeg", 0.6);
  return dataUrl;
}

function readFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader(file);
    reader.readAsDataURL(file);
    reader.onload = () => {
      const content = reader.result;
      const img = new Image();
      img.src = content;
      resolve(img);
    };
  });
}

function loadImg(img) {
  return new Promise((resolve, reject) => {
    img.onload = ()

最低0.47元/天解锁文章