这四个统一归到调用次数了吗？每天多支出100+。。。。。 https://developers.weixin.qq.com/community/minihome/doc/0000a680588d3891fa2ec250c51401?page=1 [图片]

前言 在昨天发布的《实战：如何降低云开发服务器成本？ 》文章，评论区有提到需要「关于cloudbase的扩展能力-图像处理-快速缩略模板的用法」今天我就来和大家分享一下具体用法和效果。 安装 地址：https://console.cloud.tencent.com/tcb/env/overview 选中「扩展能力」菜单下面的「扩展应用」 [图片] 选择「图片处理」服务进行「安装」 [图片] 安装过程一直「下一步」就行没有需要配置的地方，需要等待几分钟 [图片] 查看文档 安装完成之后我们就可以使用了 首先看下文档：https://cloud.tencent.com/document/product/876/42103 [图片] 找到我们要用的「快速压缩模版」。 地址：https://cloud.tencent.com/document/product/460/6929 使用方法，直接在图片后面来评价参数即可。 [图片] 实战使用 通常使用在列表场景中，本来就不要高清图，所以可以进行压缩也不会影响用户体验。 [图片] 我们找一个图片链接放在浏览器上来看 [图片] 然后使用下快速压缩模版拼接参数 ?imageView2/1/w/100/h/100 [图片] 把两张图片下载下来对比一下大小 [图片] 压缩后小了54倍 总结 这样以来不仅让用户能够更快的加载出图片，并且还能降低服务器资源成本。

1、大约半年前在论坛里寻求云开发后端图片处理方案无果，无奈退而求其次使用小程序端canvas做图片处理： https://developers.weixin.qq.com/community/develop/doc/000c00a3d74758caca2a2b3ef5b400 （寻求方案发帖） 2、canvas做图片处理，代码量比较大，对手机性能要求比较高，而且如果一次处理图片多，还会偶现各种奇怪的不稳定问题。 3、最近iPhone微信更新到7.0.20更是直接不能使用了： https://developers.weixin.qq.com/community/develop/doc/000cc4b48a4378003b7b2f97d51400 （bug反馈发帖） 4、更换图片处理的方案刻不容缓，上次云开发峰会上陈宇明大佬分享案例中提到一嘴CloudBase的相关支持，于是翻到了相关文章，一步步跟着操作，在此感谢大佬指路： https://developers.weixin.qq.com/community/develop/article/doc/0004ec150708d0b57d5bd532a53413 （大佬文章） https://cloud.tencent.com/document/product/876/42103 （开发指南） 5、本人电商项目中有多处图片处理需求，比较典型的一个业务是上传商品主图，当用户任意上传一个图片后，自动居中裁剪生成一大一小两张正方形的图，大的用在详情页，小的用在列表页。CloudBase支持两种方式：获取图片时处理、持久化图像处理。本人业务采用后者。 6、代码示例： 小程序端选择图片，上传到云存储 wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: res => { const tempFilePaths = res.tempFilePaths const tempFile = tempFilePaths[0] let pictureLarge = tempFile let fileName = pictureLarge.split('.') let format = fileName[fileName.length -1] let cloudPath = 'products/sellerId/original-' + (new Date()).valueOf() + (format.length < 5 ? '.' + format : '') wx.cloud.uploadFile({ cloudPath: cloudPath, filePath: pictureLarge, success: res => { const pictureOrignial = res.fileID wx.cloud.callFunction({ name: 'addProduct', data: { operation: 'addPicture', pictureOrignial, cloudPath } }).then(res => { if (res.result.errCode) { wx.showModal({ title: '主图处理失败', content: res.result.errMsg, showCancel: false, confirmColor: '#67ACEB' }) } else { //拿到云文件ID做后续处理 res.result.picture } }).catch(err => { console.error(err) wx.showModal({ title: '主图处理失败', content: '主图处理失败，请重试', showCancel: false, confirmColor: '#67ACEB' }) }) }, fail: err => { console.error(err) wx.showModal({ title: '主图上传失败', content: '主图上传失败，请重试', showCancel: false, confirmColor: '#67ACEB' }) } }) } }) 云函数端处理图片，先放大到最小边大于1125px，再分别裁剪出1125px和258px的两张图，存到同一目录下，返回云文件ID 先安装包： npm install --save @cloudbase/extension-ci@latest 云函数： // 云函数入口文件 const cloud = require('wx-server-sdk') const extCi = require("@cloudbase/extension-ci") const tcb = require("tcb-admin-node") cloud.init({   env: cloud.DYNAMIC_CURRENT_ENV }) tcb.init({   env: cloud.DYNAMIC_CURRENT_ENV }) tcb.registerExtension(extCi) // 云函数入口函数 exports.main = async (event) => {   const wxContext = cloud.getWXContext()   if (event.operation == 'addPicture') {     return await addPicture(event.pictureOrignial, event.cloudPath)   } else {        }    } async function addPicture(pictureOrignial, cloudPath) {   //process picture   const res = await process(cloudPath)   if (res.errCode !== 0) {     return {       errCode: 100,       errMsg: '商品主图处理失败'     }   } else {     const pictureIDLarge = pictureOrignial.replace(/original/, 'large')     const pictureID = pictureOrignial.replace(/original/, 'normal')     return {       errCode: 0,       picture: {         pictureIDLarge,         pictureID       }     }   } } async function process(cloudPath) { try { const opts = { //scale to 1125 rules: [ { fileid: '/' + cloudPath, // 处理结果的文件路径，如以’/’开头，则存入指定文件夹中，否则，存入原图文件存储的同目录 rule: "imageMogr2/thumbnail/!1125x1125r" // 处理样式参数，与下载时处理图像在url拼接的参数一致 } ] } await tcb.invokeExtension("CloudInfinite", { action: "ImageProcess", cloudPath: cloudPath, // 图像在云存储中的路径，与tcb.uploadFile中一致 operations: opts }) } catch (err) { return JSON.stringify(err, null, 4) } try { const opts = { rules: [ //crop large { fileid: '/' + cloudPath.replace(/original/, 'large'), rule: "imageView2/1/w/1125/h/1125/q/85" }, //crop normal { fileid: '/' + cloudPath.replace(/original/, 'normal'), rule: "imageView2/1/w/258/h/258/q/85" } ] } await tcb.invokeExtension("CloudInfinite", { action: "ImageProcess", cloudPath: cloudPath, // 图像在云存储中的路径，与tcb.uploadFile中一致 operations: opts }) } catch (err) { return JSON.stringify(err, null, 4) } return { "errCode": 0, "errMsg": "ok" } }