imgResize基础知识教程_移动端H5图片压缩

imgResize基础知识教程

GitHub:https://github.com/CommanderXL/imgResize

imgResize基础知识教程_移动端H5图片压缩

简介描述:移动端H5图片压缩

大体的思路是,部分 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)
  }
})

海计划公众号
(0)
上一篇 2020/03/11 07:00
下一篇 2020/03/11 07:00

您可能感兴趣的内容