图片压缩及base转文件流

最新推荐文章于 2024-03-10 16:42:51 发布

小宇宙chris_310

最新推荐文章于 2024-03-10 16:42:51 发布

阅读量187

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_38796823/article/details/113844283

版权

javascript 专栏收录该内容

33 篇文章

订阅专栏

这段代码展示了如何使用HTML5的Canvas进行图片压缩，并将压缩后的图片转换为Base64编码。首先创建一个Image对象加载图片，然后创建Canvas并获取2D绘图上下文。当图片加载完成后，将其绘制到Canvas上，再通过toDataURL方法生成压缩后的Base64编码。最后，提供了一个从Base64编码转换回File对象的方法。

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

  let img = new Image();
  img.src = this.fileListL[0].content;
  var canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  let initSize = img.src.length;
  img.onload = () => {
    let width = img.width;
    let height = img.height;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    let dataURL = canvas.toDataURL("image/jpeg", scale - 0); //压缩后的文件的base64
  }

  // base64转文件流
  base64ToFile(dataurl, filename) {
    var arr = dataurl.split(","),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
  }