bug 获取图片信息无法同步执行

app.js

@@ -11,6 +11,7 @@ App({
    */
   onLaunch: function () {
     this.globalData.tmp = cos.get();
+    wx.cloud.init()
   },
 
   /**

app.json

@@ -1,4 +1,5 @@
 {
+  "cloud": true,
   "pages": [
     "pages/index/index",
     "pages/album/album",

functions/imgcheck/config.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+      "openapi": [
+          "security.imgSecCheck"
+      ]
+  }
+}

functions/imgcheck/index.js

@@ -0,0 +1,30 @@
+const cloud = require('wx-server-sdk');
+cloud.init();
+exports.main = async (event, context) => {
+  console.log(event.txt);
+  const {
+    value,
+  } = event;
+  try {
+    let msgR = false;
+    let imageR = false;
+    //检查 图片内容是否违规
+    if (value) {
+      imageR = await cloud.openapi.security.imgSecCheck({
+        media: {
+          header: {
+            'Content-Type': 'application/octet-stream'
+          },
+          contentType: 'image/png',
+          value: Buffer.from(value)
+        }
+      })
+    }
+    return {
+      imageR //图片检查返回值
+    };
+  } catch (err) {
+    // 错误处理
+    return err
+  }
+}

functions/imgcheck/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "check",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "wx-server-sdk": "latest"
+  }
+}

lib/util.js

@@ -46,4 +46,41 @@ module.exports = {
             .replace(/\)/g, '%29')
             .replace(/\*/g, '%2A');
     },
-};
+
+    //安全审查
+    checkSafePic: function (tempFilePaths) {
+        return new Promise(function (resolve, reject) {
+            wx.getFileSystemManager().readFile({
+                filePath: tempFilePaths, //这里做示例，所以就选取第一张图片
+                success: buffer => {
+                    //这里是 云函数调用方法
+                    wx.cloud.callFunction({
+                        name: 'imgcheck',
+                        data: {
+                            value: buffer.data
+                        },
+                        success(json) {
+                            console.log(json)
+                            if (json.result.errCode == 87014) {
+                                console.log("图片违法违规")
+                                resolve(false)
+                            } else {
+                                resolve(true)
+                            }
+                        },
+                        fail(res) {
+                            console.log(res)
+                            wx.hideLoading()
+                            wx.showToast({
+                                title: '上传失败',
+                                icon: 'error',
+                                duration: 2000
+                            });
+                            reject(res)
+                        }
+                    })
+                }
+            })
+        })
+    },
+}

pages/album/album.js

@@ -1,6 +1,3 @@
-const {
-  listToMatrix
-} = require('../../lib/util.js');
 var COS = require('../../lib/cos-wx-sdk-v5.js');
 const config = require('../../config.js');
 const util = require('../../lib/util.js');
@@ -126,7 +123,9 @@ Page({
       height
     } = wx.getMenuButtonBoundingClientRect()
 
-    wx.enableAlertBeforeUnload({message:"要返回首页吗？"})
+    wx.enableAlertBeforeUnload({
+      message: "要返回首页吗？"
+    })
     // 状态栏高度
     wx.setStorageSync('statusBarHeight', statusBarHeight)
     // 胶囊按钮高度 一般是32 如果获取不到就使用32
@@ -246,7 +245,7 @@ Page({
       type: 'add'
     });
 
-    layoutList = listToMatrix(imageList, layoutColumnSize, this.data.marker);
+    layoutList = util.listToMatrix(imageList, layoutColumnSize, this.data.marker);
 
     this.setData({
       layoutList,
@@ -262,27 +261,51 @@ Page({
       sourceType: ['album', 'camera'],
       success: (res) => {
         this.showLoading('正在上传图片…');
+
         res.tempFilePaths.forEach(function (filePath) {
-          var Key = util.getRandFileName(filePath);
-          filePath && cos.postObject({
-            Bucket: config.Bucket,
-            Region: config.Region,
-            Key: Key,
-            FilePath: filePath
-          }, function (err, data) {
-            if (data) {
-              let albumList = self.data.albumList;
-              // debugger;
-              albumList.unshift('https://' + data.Location);
-              self.setData({
-                albumList
-              });
-              self.renderAlbumList();
+          self.getCanvasImg(filePath).then(
+            res => {
+              console.log(res)
+              util.checkSafePic(res).then(res => {
+                if (res) {
+                  var Key = util.getRandFileName(filePath);
+                  filePath && cos.postObject({
+                    Bucket: config.Bucket,
+                    Region: config.Region,
+                    Key: Key,
+                    FilePath: filePath
+                  }, function (err, data) {
+                    if (data) {
+                      let albumList = self.data.albumList;
+                      // debugger;
+                      albumList.unshift('https://' + data.Location);
+                      self.setData({
+                        albumList
+                      });
+                      self.renderAlbumList();
+                    }
+                    self.hideLoading();
+                  });
+                } else {
+                  self.hideLoading()
+                  wx.showToast({
+                    title: "图片违法违规",
+                    icon: 'none',
+                    duration: 3000
+                  })
+                }
+              })
+            }, err => {
+              self.hideLoading()
             }
-            self.hideLoading();
-          });
+          )
+
+
         });
-      },
+      }, fail: (err) => {
+        console.log(err)
+        self.hideLoading();
+      }
     });
   },
 
@@ -495,5 +518,56 @@ Page({
       duration: 500
     })
     this.hideActionSheet()
+  },
+
+  //压缩并获取图片，这里用了递归的方法来解决canvas的draw方法延时的问题
+  getCanvasImg: function (tempFilePaths) {
+    var that = this;
+    return new Promise(function (resolve, reject) {
+      //-----返回选定照片的本地文件路径列表，获取照片信息-----------
+      wx.getImageInfo({
+        src: tempFilePaths,
+        success: function (res) {
+          //---------利用canvas压缩图片--------------
+          var ratio = 2;
+          var canvasWidth = res.width //图片原始长宽
+          var canvasHeight = res.height
+          while (canvasWidth > 400 || canvasHeight > 400) { // 保证宽高在400以内
+            canvasWidth = Math.trunc(res.width / ratio)
+            canvasHeight = Math.trunc(res.height / ratio)
+            ratio++;
+          }
+          console.log("图片压缩后大小为" + canvasWidth + "x" + canvasHeight)
+          that.setData({
+            cWidth: canvasWidth,
+            cHeight: canvasHeight
+          })
+
+          //----------绘制图形并取出图片路径--------------
+          var ctx = wx.createCanvasContext('canvas')
+          ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
+          ctx.draw(false, setTimeout(function () {
+            wx.canvasToTempFilePath({
+              canvasId: 'canvas',
+              destWidth: canvasWidth,
+              destHeight: canvasHeight,
+              quality: 0.8,
+              success: function (res) {
+                //最终图片路径
+                console.log(res)
+                resolve(res.tempFilePath)
+              },
+              fail: function (res) {
+                console.log(res.errMsg)
+              }
+            })
+          }, 300))
+        }, //留一定的时间绘制canvas
+        fail: function (res) {
+          console.log(res.errMsg)
+          reject(res)
+        }
+      })
+    })
   }
 });

pages/album/album.wxml

@@ -1,3 +1,4 @@
+<canvas canvas-id='canvas' style="width:{{cWidth}}px;height:{{cHeight}}px;"></canvas>
 <view class="navigation-container" style="{{'height: ' + navigationBarAndStatusBarHeight}}">
 	<!--空白来占位状态栏-->
 	<view style="{{'height: ' + statusBarHeight}}"></view>
@@ -87,7 +88,7 @@
 <loading hidden="{{!showLoading}}" bindchange="hideLoading">{{loadingMessage}}</loading>
 <toast hidden="{{!showToast}}" duration="1000" bindchange="hideToast">{{toastMessage}}</toast>
 
-<mp-dialog title="返回首页" show="{{back}}" bindbuttontap="confirmBack()" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
+<mp-dialog title="返回首页" show="{{back}}" bindbuttontap="confirmBack" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
 	<image src="/images/done.png" style="width:50px;height:50px;" />
 	<view>真的要回去吗？</view>
 </mp-dialog>

pages/index/index.js

@@ -18,38 +18,55 @@ Page({
   },
   // 前往相册页
   uploadImage() {
+    var that = this
     wx.chooseImage({
       count: 1,
       camera: 'back',
-      sizeType: ['original',],
+      sizeType: ['original', 'compressed'],
       sourceType: ['album', 'camera'],
       success: function (res) {
+        wx.showLoading({
+          title: '正在上传...',
+        });
         var filePath = res.tempFilePaths[0];
-        if (filePath) {
-          var Key = util.getRandFileName(filePath);
-          wx.showLoading({
-            title: '正在上传...'
-          });
-          cos.postObject({
-            Bucket: config.Bucket,
-            Region: config.Region,
-            Key: Key,
-            FilePath: filePath,
-          }, function (err, data) {
-            wx.hideLoading();
-            if (data && data.Location) {
-              wx.navigateTo({
-                url: '../preview/preview?type=image&url=' + encodeURIComponent('https://' + data.Location)
-              });
-            } else {
-              wx.showToast({
-                title: '上传失败',
-                icon: 'error',
-                duration: 2000
-              });
+        that.getCanvasImg(res.tempFilePaths).then(res => {
+          setTimeout(util.checkSafePic(res).then(
+            res => {
+              if (res) {
+                //图片正常
+                if (filePath) {
+                  var Key = util.getRandFileName(filePath);
+                  cos.postObject({
+                    Bucket: config.Bucket,
+                    Region: config.Region,
+                    Key: Key,
+                    FilePath: filePath,
+                  }, function (err, data) {
+                    wx.hideLoading();
+                    if (data && data.Location) {
+                      wx.navigateTo({
+                        url: '../preview/preview?type=image&url=' + encodeURIComponent('https://' + data.Location)
+                      });
+                    } else {
+                      wx.showToast({
+                        title: '上传失败',
+                        icon: 'error',
+                        duration: 3000
+                      });
+                    }
+                  });
+                }
+              } else {
+                wx.showToast({
+                  title: '图片违法违规',
+                  icon: 'none',
+                  duration: 3000
+                });
+              }
             }
-          });
+          ), 300)
         }
+        )
       }
     })
   },
@@ -82,8 +99,8 @@ Page({
             } else {
               wx.showToast({
                 title: '上传失败',
-                icon: 'error',
-                duration: 2000
+                icon: 'none',
+                duration: 3000
               });
             }
           });
@@ -97,4 +114,52 @@ Page({
       url: '../album/album'
     });
   },
-});
+  //压缩并获取图片，这里用了递归的方法来解决canvas的draw方法延时的问题
+  getCanvasImg: function (tempFilePaths) {
+    var that = this;
+    return new Promise(function (resolve, reject) {
+      //-----返回选定照片的本地文件路径列表，获取照片信息-----------
+      wx.getImageInfo({
+        src: tempFilePaths[0],
+        success: function (res) {
+          //---------利用canvas压缩图片--------------
+          var ratio = 2;
+          var canvasWidth = res.width //图片原始长宽
+          var canvasHeight = res.height
+          while (canvasWidth > 400 || canvasHeight > 400) { // 保证宽高在400以内
+            canvasWidth = Math.trunc(res.width / ratio)
+            canvasHeight = Math.trunc(res.height / ratio)
+            ratio++;
+          }
+          console.log("图片压缩后大小为" + canvasWidth + "x" + canvasHeight)
+          that.setData({
+            cWidth: canvasWidth,
+            cHeight: canvasHeight
+          })
+
+          //----------绘制图形并取出图片路径--------------
+          var ctx = wx.createCanvasContext('canvas')
+          ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
+          ctx.draw(false, setTimeout(function () {
+            wx.canvasToTempFilePath({
+              canvasId: 'canvas',
+              destWidth: canvasWidth,
+              destHeight: canvasHeight,
+              success: function (res) {
+                //最终图片路径
+                resolve(res.tempFilePath)
+              },
+              fail: function (res) {
+                console.log(res.errMsg)
+              }
+            })
+          }, 100))
+        }, //留一定的时间绘制canvas
+        fail: function (res) {
+          console.log(res.errMsg)
+          reject(res)
+        }
+      })
+    })
+  }
+})

pages/index/index.wxml

@@ -1,3 +1,4 @@
+<canvas canvas-id='canvas' style="width:{{cWidth}}px;height:{{cHeight}}px;"></canvas>
 <view class="top"></view>
 <view class="bottom"></view>
 <view class="main">

project.config.json

@@ -13,6 +13,7 @@
 		"autoAudits": false,
 		"showShadowRootInWxmlPanel": true,
 		"scopeDataCheck": false,
+		"uglifyFileName": false,
 		"checkInvalidKey": true,
 		"checkSiteMap": true,
 		"uploadWithSourceMap": true,
@@ -35,6 +36,7 @@
 	"isGameTourist": false,
 	"simulatorType": "wechat",
 	"simulatorPluginLibVersion": {},
+	"cloudfunctionRoot": "functions/",
 	"condition": {
 		"search": {
 			"current": -1,