canvas压缩图片和base64上传图片

最新推荐文章于 2024-07-18 22:13:37 发布

原创最新推荐文章于 2024-07-18 22:13:37 发布 · 256 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas压缩图片 #base64上传图片

javaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API来压缩图片并将其转换为Base64编码格式以便于上传。通过调整图片尺寸，可以有效减小文件大小，从而提高上传效率。

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

canvas压缩图片和base64上传图片

html:

<input type="text" onchange="upload">

javaScript

function upload() {
  var file=this.files[0];
  uploadImg(file,1).then(function (data) {
    //data 就是base64返回值
  })
}

function uploadImg(file,scale) {
  return new Promise(function (resolve,reject) {
    let _scale=scale || 1;
    let cvs = document.createElement('canvas');
    let ctx = cvs.getContext('2d');
    let img = new window.Image();
    let imgType=file.type;
    img.src = URL.createObjectURL(file);
    img.onload=function () {
      cvs.width = img.width*_scale;
      cvs.height = img.height*_scale;
      ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
      resolve(cvs.toDataURL(imgType));
    }
  });
}