微信小步伐压缩图片

由于wx.compressImage(Object object) iOS 仅支持压缩 JPG 格式图片。所以我们需要做一下特别的处理：
1.获取文件，判断文件是否大于设定的大小
2.假如大于则利用canvas进行绘制，并生成新的图片路径
3.上传图片

1. async chooseImage() {
2.     let res = await wx.chooseMedia({
3.       count: 1,
4.       sizeType: ["compressed"],
5.       mediaType: ['image']
6.     })
7.     if (res.tempFiles[0].size > 500 * 1024) { //大于500k
8.         //压缩图片
9.       compressImage(res.tempFiles[0], '#canvasId').then(result => {
10.         this.uploadFile(result.tempFilePath)
11.       })
12.     } else {
13.       this.uploadFile(res.tempFiles[0].tempFilePath)
14.     }
15.   },

复制代码

1. const compressImage = function (file, node) {
2.   return new Promise((resolve, reject) => {
3.     //获取图片的信息
4.     wx.getImageInfo({
5.       src: file.tempFilePath,
6.       success: async function (imageInfo) {
7.         //获取canvas
8.         const query = wx.createSelectorQuery()
9.         let canvasDom = query.select(node) //画布id
10.         canvasDom.fields({
11.             node: true,
12.             size: true
13.           })
14.           .exec((res) => {
15.             const canvas = res[0].node
16.             canvas.width = 900
17.             canvas.height = 900
18.             const ctx = canvas.getContext('2d')
19.             let img = canvas.createImage();
20.             img.src = imageInfo.path; //要压缩的图片路径
21.             img.onload = () => {
22.               // 将图片绘制到canvas
23.               ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
24.               // 生成图片
25.               wx.canvasToTempFilePath({
26.                 canvas,
27.                 destWidth: 900, //压缩后宽
28.                 destHeight: 900, //压缩后高
29.                 fileType: 'jpg',
30.                 quality: 0.8, //质量，可自定义
31.                 success: (imgResult) => {
32.                   let fs = wx.getFileSystemManager()
33.                   fs.getFileInfo({
34.                     filePath: imgResult.tempFilePath,
35.                     success: (res) => {
36.                         //压缩后的图片如果还是大于500k，那么继续压缩直到小于500为止
37.                       if (res.size > 500 * 1024) {
38.                         compressImage(imgResult)
39.                       } else {
40.                         resolve(imgResult)
41.                       }
42.                     }
43.                   })
44.                 },
45.                 fail: (err) => {
46.                   console.error(err);
47.                   reject(err)
48.                 }
49.               })
50.             }
51.           })
52.       },
53.       fail: function (err) {
54.         console.error('获取图片信息失败：', err);
55.       }
56.     });
57.   })
58. }

复制代码

1. uploadFile(avatarUrl) {
2.     if (avatarUrl) {
3.       wx.uploadFile({
4.         filePath: avatarUrl,
5.         name: 'file',
6.         url: "http://139.224.49.138:888/mini/myPage/uploadAvatar",
7.         formData: {
8.           openid: getApp().globalData.openid
9.         },
10.         success: (res) => {
11.           let {
12.             userInfo
13.           } = app.store.getState();
14.           userInfo.headPic = JSON.parse(res.data).url
15.           app.store.setState({
16.             userInfo: userInfo
17.           });
18.         },
19.         fail: err => {
20.           console.log(err);
21.         }
22.       })
23.     }
24.   },

复制代码

1. <canvas hidden="{
2.   
3.   {true}}" type="2d" id="canvasId"/>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。