ToB企服应用市场:ToB评测及商务社交产业平台

标题: 微信小步伐直传腾讯云COS并对图片长期化笔墨水印案例 [打印本页]
作者: 小小小幸运    时间: 2024-6-9 15:07
标题: 微信小步伐直传腾讯云COS并对图片长期化笔墨水印案例
各人好，我是前端发现者https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。
写这个需求时网上搜索看到的文章不计其数，很多“缺斤少两”，今天做个总结吧。
一、前期准备

二、盘算署名

由于署名盘算放在前端会暴露 SecretId 和 SecretKey，我们把署名盘算过程放在后端实现，前段通过 ajax 向后端获取署名结果，正式部署时请再后端加一层本身网站本身的权限查验。
三、下载需要的文件

去到这里下面地点下载文件到项目的utils文件夹下。https://github.com/tencentyun/cos-wx-sdk-v5
https://github.com/tencentyun/cos-wx-sdk-v5
四、实当代码


在需要实行上传操作的js文件复制如下代码：
  1. const COS = require('./cos-wx-sdk-v5.js')
  3. // 初始化腾讯云存储
  4. const commonCos = new COS({
  5.     // ForcePathStyle: true,
  6.     // 如果使用了很多存储桶，可以通过打开后缀式，减少配置白名单域名数量，请求时会用地域域名
  7.     FileParallelLimit: 40, //同一个实例下上传的文件并发数，默认值3
  8.     ChunkParallelLimit: 40, //同一个上传文件的分块并发数，默认值3
  9.     //获取签名的回调方法
  10.     getAuthorization: (options, callback) => {
  11.         // 异步获取临时密钥
  12.         http.getRequest('/small/small/getTempScert', {
  13.             bucket: options.Bucket,
  14.             region: options.Region,
  15.         }, res => {
  16.             let credentials = res.data.credentials
  17.             if (!credentials) return console.error('credentials invalid')
  18.             callback({
  19.                 TmpSecretId: credentials.tmpSecretId,
  20.                 TmpSecretKey: credentials.tmpSecretKey,
  21.                 XCosSecurityToken: credentials.sessionToken,
  22.                 // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
  23.                 StartTime: res.data.startTime, // 时间戳，单位秒，如：1580000000
  24.                 ExpiredTime: res.data.expiredTime, // 时间戳，单位秒，如：1580000900
  25.             })
  26.         })
  27.     }
  28. })
  31. // 上传图片 flag:1 需要校验是否需要水印 -1 不校验、不使用水印
  32. const commonUploadImg = async (name, flag = -1, classId = null) => {
  33.   return new Promise((resolve) => {
  34.     wx.chooseImage({
  35.       count: 9,
  36.       sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
  37.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  38.       success: async (res) => {
  39.         wx.showLoading({
  40.           title: '上传中...',
  41.           icon: 'loading',
  42.         })
  43.         let filenameList = []
  44.         let filePathList = []
  45.         if (res.tempFiles.length) {
  46.           let tempFile = res.tempFiles
  47.           let countNum = 0
  48.           let waterResult = null
  49.           if (flag == 1) {
  50.             /**获取水印信息*/
  51.             waterResult = await getClassInfoIfWaterMark({
  52.               classId: classId,
  53.               homeWorkId: name
  54.             })
  55.           }
  56.           for (let temp of tempFile) {
  57.             // 这里对图片校验-传入压缩后的图片
  58.             const result = true
  59.             if (result) {
  60.               if (temp.size > 10485760) {
  61.                 wx.hideLoading()
  62.                 wx.showToast({
  63.                   title: `图片最大可以上传${10485760/1024/1024}M`,
  64.                   icon: 'none',
  65.                   duration: 1500
  66.                 })
  67.               } else {
  68.                 const filePath = temp.path
  69.                 const tempDate = new Date()
  70.                 const createPath = tempDate.getFullYear() + "" + utils.formatNumber((tempDate.getMonth() + 1)) + "" + utils.formatNumber(tempDate.getDate()) + "/"
  71.                 const filename = createPath + name + '/' + filePath.substr(filePath.lastIndexOf('/') + 1)
  72.                 let fileId = filePath.substr(filePath.lastIndexOf('/') + 1)
  73.                 const wxfs = wx.getFileSystemManager()
  74.                 let ruleValue = `imageMogr2/format/jpg/interlace/1/rquality/60`
  75.                 let rule = {
  76.                   "is_pic_info": 0,
  77.                   "rules": [{
  78.                     "fileid": `${fileId}`,
  79.                     "rule": ruleValue
  80.                   }]
  81.                 }
  82.                 if (flag == 1) {
  83.                   if (waterResult && waterResult.ifWaterMark) {
  84.                     let info = `${waterResult.waterFormat}`
  85.                     let waterInfo = utils.Base64.encode(info)
  86.                     let fontColor = utils.Base64.encode(waterResult.waterColor || '#09ff00')
  87.                     let waterPosition = waterResult.waterPosition || 'center'
  88.                     let waterRangle = waterResult.waterRangle || 0
  89.                     let water = `watermark/2/text/${waterInfo}/font/c2ltaGVp6buR5L2TLnR0Zg/fill/${fontColor}/fontsize/50/gravity/${waterPosition}/degree/${waterRangle}/dissolve/100`
  90.                     rule.rules[0].rule = `${ruleValue}|${water}`
  91.                   }
  92.                 }
  93.                 wxfs.readFile({
  94.                   filePath: filePath,
  95.                   success(res) {
  96.                     commonCos.putObject({
  97.                       Bucket: 'img-work-1304215329',
  98.                       Region: 'ap-beijing',
  99.                       Key: filename,
  100.                       Body: res.data,
  101.                       Headers: {
  102.                         // 通过 数据万象的压缩自定义规则 style/uploadStyle
  103.                         // 'Pic-Operations': `{"is_pic_info": 0, "rules": [{"fileid": "${fileId}","rule": "style/uploadStyle"}]}`,
  104.                         'Pic-Operations': `${JSON.stringify(rule)}`
  105.                       },
  106.                     }, function (err, data) {
  107.                       if (data && data.statusCode == 200) {
  108.                         countNum++
  109.                         filenameList.push(filename)
  110.                         filePathList.push(filePath)
  111.                         if (countNum == tempFile.length) {
  112.                           wx.hideLoading()
  113.                           let obj = {
  114.                             filenameList,
  115.                             filePathList
  116.                           }
  117.                           resolve(obj)
  118.                         }
  119.                       }
  120.                     })
  121.                   }
  122.                 })
  123.               }
  124.             }
  125.           }
  126.         }
  127.       },
  128.       fail() {
  129.         wx.hideLoading()
  130.       }
  131.     })
  132.   })
  133. }
复制代码
长期化处置惩罚图片的规则可参考如下：
数据万象 图片长期化处置惩罚-API 文档-文档中心-腾讯云

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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4