js纯前端压缩图片

js纯前端压缩




    
    
    压缩图片


    
    

分析:原理是用canvas的生成的图片,控制其大小来进行图片的压缩,需要注意的是,如果图片的尺寸太小,会导致图片模糊,使用时候,注意设置其比例控制。

  1. 通过FileReader读取图片文件,用 Image来装图片url(可以用来预览)
  2. 转化成base64字符串模式
  3. 通过maxWidth,MaxHeight和比例来控制最终的canvas的宽高
  4. 用canvas画图
  5. 在把canvas输出blob文件,进行上传

你可能感兴趣的:(js,canvas,js,canvas)