利用Canvas压缩图片

实现方法说明:

1 调用wx.getImageInfo取得图片原始宽高,计算输出图片宽高(限定短边等比缩放)

2 调用ctx.drawImage用计算出的宽高把图片画到Canvas上,

3 调用wx.canvasToTempFilePath把Canvas上的画面保存到文件.

其他说明:

1 因为Canvas使用的单位是px,手机设备上不是物理分辨率单位,需要调用wx.getSystemInfo取得pixelRatio用于计算基于px单位宽高.

2 为了调试方便,加入了getImageInfo函数,正式使用时可以注销掉.

3 因为使用了canvas,小程序中不能做离屏Canvas操作.所以必须在wxml中加带id的canvas标签

4 canvas的宽高必须满足图片的宽高,所以要在ctx.drawImage之前调用resizeCanvas

util.js中加

var sysInfo
const getSystemInfo = function () {
 return new Promise((resolve, reject) => {
   if (sysInfo) {
     resolve(sysInfo)
     return
   }
   wx.getSystemInfo({
     success: (info) => {
       console.debug('systemInfo', info)
       sysInfo = info
       resolve(info)
     },
     fail: reject
   })
 })
}
const getImageInfo = function (path) {
 var begin = new Date().getTime()
 return new Promise((resolve, reject) => {
   wx.getFileInfo({
     filePath: path,
     success: function (file) {
       wx.getImageInfo({
         src: path,
         success: function (image) {
           var info = {
             size: file.size,
             height: image.height,
             width: image.width,
             orientation: image.orientation,
             type: image.type,
             digest: file.digest,
             path: image.path,
             cost: (new Date().getTime() - begin),
           }
           console.debug('图片info', info)
           resolve(info)
         },
         fail: reject,
       })
     },
     fail: reject,
   })
 })
}
/**
* @Param {String} path 图片路径
* @Param {String} canvas 定义在canvas标签的id
* @Param {Function} resize 用于修canvas的宽高
* @Param {Number} limit 短边限制值
*/
const compress = function (path, canvas, resize, limit) {
 console.debug('开始压缩', { path: path, canvas: canvas })
 if (!limit) {
   limit = 1440
 }
 return getSystemInfo().then((sysInfo) => {
   return new Promise((resolve, reject) => {
     wx.getImageInfo({
       src: path,
       success: function (info) {
         console.debug('原图信息', info)
         if (Math.min(info.width, info.height) <= 1440) {
           resolve(path)
           return
         }
         var width = limit
         var height = limit * info.height / info.width
         if (info.width > info.height) {
           height = limit
           width = limit * info.width / info.height
         }
         if (sysInfo.brand != 'devtools') {
           width = width / sysInfo.pixelRatio
           height = height / sysInfo.pixelRatio
         }
         resize(width, height, function () {
           compressImage(canvas, path, width, height)
             .then(resolve)
             .catch(reject)
         });
       },
       fail: reject
     })
   })
 })
}
const compressImage = (canvas, path, width, height) => {
 var begin = new Date().getTime()
 return new Promise((resolve, reject) => {
   const ctx = wx.createCanvasContext(canvas)
   ctx.drawImage(path, 0, 0, width, height)
   ctx.draw(false, function () {
     wx.canvasToTempFilePath({
       width: width,
       height: height,
       fileType: 'jpg',
       quality: 0.7,
       canvasId: canvas,
       success: function (res) {
         console.debug('压缩图片cost:' + (new Date().getTime() - begin))
         resolve(res.tempFilePath)
         getImageInfo(res.tempFilePath)
       },
       fail: reject
     })
   })
 })
}
/**
* @Param {String} canvasId 定义在canvas标签的id
* @Param {Function} resizeHandler 用于修改canvas的宽高
*/
const chooseImage = function (canvasId, resizeHandler) {
 return new Promise((resolve, reject) => {
   wx.chooseImage({
     sizeType: ['original'],
     sourceType: ['camera'],
     success: (res) => {
       compress(res.tempFilePaths[0], canvasId, resizeHandler)
         .then(resolve)
         .catch(reject)
     },
     fail: reject
   })
 })
}

使用方法

页面js文件

appendImage: function (e) {
 util.chooseImage('compressCanvas', this.resizeCanvas)
   .then((path) => {
     this.setData({
       files1: this.data.files1.concat(path),
       dirty: true,
     });
   })
},
resizeCanvas: function (width, height, callback) {
 this.setData({
   canvasWidth: width,
   canvasHeight: height,
 }, callback)
},

页面wxml文件

 
view>