云调用拓展
云存储可以与云开发提供的云调用拓展服务产生联动,提供「存储+处理」一体化解决方案,您可以结合实际需要安装云开发相应的云调用能力,如图像处理、图像标签、图像盲水印、图像安全审核等。
您可以通过以下两种方式处理图片:为图像 URL 拼接参数进行单次处理、客户端和云函数端持久化图像处理。
#
图像 URL 拼接参数例如在安装了图像处理拓展能力的情况下,您可以直接拿云存储的 https 链接 (下载地址或临时链接)进行拼接,拼接之后的链接我们既可以在小程序、Web 网页里使用,也可以用于图床,例如原始图片下载地址为:
https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049
下载地址后面拼接参数&imageMogr2/thumbnail/!20p
,就可以将图片等比例缩小到原来的 20% 。
//将图片等比例缩小到原来的20%https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049&imageMogr2/thumbnail/!20p
更多案例如下:
const download_url = "https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049"//缩放宽度,高度不变,下面案例为宽度为原图50%,高度不变download_url&imageMogr2/thumbnail/!50px
//缩放高度,宽度不变,下面案例为高度为原图50%,宽度不变download_url&imageMogr2/thumbnail/!x50p
//指定目标图片的宽度(单位为px),高度等比压缩,注意下面的是x,不是px,p与x在拼接里代表着不同的意思download_url&imageMogr2/thumbnail/640x
//指定目标图片的高度(单位为px),宽度等比压缩:download_url&imageMogr2/thumbnail/x355
//限定缩略图的宽度和高度的最大值分别为 Width 和 Height,进行等比缩放download_url&imageMogr2/thumbnail/640x355
//限定缩略图的宽度和高度的最小值分别为 Width 和 Height,进行等比缩放download_url&imageMogr2/thumbnail/640x355r
//忽略原图宽高比例,指定图片宽度为 Width,高度为 Height ,强行缩放图片,可能导致目标图片变形download_url&imageMogr2/thumbnail/640x355!
//等比缩放图片,缩放后的图像,总像素数量不超过 Areadownload_url&imageMogr2/thumbnail/150000@
//取半径为300,进行内切圆裁剪download_url&imageMogr2/iradius/300
//取半径为100px,进行圆角裁剪download_url&imageMogr2/rradius/100
//顺时针旋转90度download_url&imageMogr2/rotate/90
//将jpg格式的原图片转换为 png 格式download_url&imageMogr2/format/png
//模糊半径取8,sigma 值取5,进行高斯模糊处理download_url&imageMogr2/blur/8x5
//获取图片的基础信息,返回的是json格式,我们可以使用https请求来查看图片的format格式,width宽度、height高度,size大小,photo_rgb主色调download_url&imageInfo
#
持久化图像处理安装拓展 SDK 到项目
//Web端、管理端、云函数端等需安装 cloudbase/extension-ci 到项目npm install --save @cloudbase/extension-ci@latest
//微信小程序需要安装 cloudbase/extension-ci-wxmp 到项目npm install --save @cloudbase/extension-ci-wxmp@latest
- 可能你的开发者工具会报以下错误:
https://786c-xly-xrlur-1300446086.pic.ap-shanghai.myqcloud.com 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
,这个要按照参考文档将链接加入到合法域名当中,不然不会生成图片; action
是操作类型,它的值可以为:ImageProcess 图像处理,DetectType 图片安全审核,WaterMark 图片盲水印、DetectLabel 图像标签等;operations
是图像处理参数。
- Web
- 微信小程序
- Node.js
const extCi = require("@cloudbase/extension-ci");const tcb = require("tcb-js-sdk");
const readFile = async function(file) { let reader = new FileReader(); let res = await new Promise(resolve => { reader.onload = function(e) { let arrayBuffer = new Uint8Array(e.target.result); resolve(arrayBuffer); }; reader.readAsArrayBuffer(file); }); return res;};let file = document.getElementById("selectFile").files[0];let fileContent = await readFile(file);
const extCi = require("@cloudbase/extension-ci-wxmp");
async imgprocess(){ const readFile = async function() { let res = await new Promise(resolve=>{ wx.chooseImage({ success: function(res) { let filePath = res.tempFilePaths[0] let fm = wx.getFileSystemManager() fm.readFile({ filePath, success(res){ resolve(res) } }) } }) }) return res }
let fileResult = await readFile(); //获取图像的临时文件上传结果 const fileContent = fileResult.data //获取上传到临时文件的图像,为Uint8Array或Buffer格式
async function imageProcess() { extCi.invoke({ action: "ImageProcess", cloudPath: "tcbdemo.jpg", // 图像在云存储中的路径,有点类似于wx.cloud.uploadFile接口里的cloudPath,上传的文件会保存为云存储根目录下的hehe.jpg operations: { rules: [ { fileid: "/image_process/tcbdemo.png", //将图片存储到云存储目录下的image_process文件夹里,也就是我们用image_process存储处理之后的图片 rule: "imageMogr2/format/png", // 处理样式参数,我们可以在这里写图像处理的参数拼接 } ] }, fileContent }).then(res => { console.log(res); }).catch(err => { console.log(err); }) } await imageProcess()}
const tcb = require("@cloudbase/node-sdk");const app = tcb.init();const extCi = require("@cloudbase/extension-ci");tcb.registerExtension(extCi);
async function process() { try { const opts = { rules: [ { fileid: "/image_process/tcbdemo.jpeg", rule: "imageMogr2/format/png" } ] }; const res = await app.invokeExtension("CloudInfinite", { action: "ImageProcess", cloudPath: "tcbdemo.jpg", fileContent, operations: opts }); console.log(res); return res; } catch (err) { console.log(err); }}
#
参考更多详细信息请参考: