大体的思路是，部分 api 的兼容性请参照caniuse： 

利用FileReader,读取blob对象,或者是file对象，将图片转化为data uri的形式。 
使用canvas,在页面上新建一个画布,利用canvas提供的 API,将图片画入这个画布当中。 
利用canvas.toDataURL()，进行图片的压缩，得到图片的data uri的值 
上传文件。

安装

npm install canvas-resize --save

使用

import canvasResize from 'canvas-resize'

canvasResize(img, {
  crop: false,
  quality: 0.9,
  rotate: 0,
  callback(baseStr) {
    console.log(baseStr.length)
  }
})

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2711