工具方法
更新时间: 2024/03/27 18:04:29
图片操作
使用预览文件和发送文件消息拿到图片 url 之后,可以调用 SDK 提供的图片操作来处理图片, 所有的操作在 NIM 和 Chatroom 上都提供, 下文仅以 NIM 为例给出使用方法, 图片操作分为两大类
- 一类是通过 url 拼接的方式来处理图片, 此类接口是同步的, 一般用于展示图片, 通过此类方式生成的 url 仅可用于 UI 展示, 调用其它非图片处理接口的时候不能传入此类 url
- 一类是通过服务器来处理图片, 此类接口是异步的, 一般用于生成新的 url, 调用其它非图片处理接口的时候可以传入此类 url
预览图片通用方法
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url 即将以下常用的图片处理方法合并到一个接口中
- 代码示例
javascript var url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var newImageUrl = nim.viewImageSync({
url: url, // 必填
strip: true, // 去除图片元信息 true or false 可选填
quality: 80, // 图片质量 0 - 100 可选填
interlace: true, // 渐变清晰, 可选填
rotate: 90, // 旋转角度,顺时针,可选填
thumbnail: { // 生成缩略图, 可选填
width: 80,
height: 20,
mode: cover
}
});
- newImageUrl形如: http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ2OTUyMDc1NzAyNl8wMTA0NmIyMi0yNTQzLTQ2OTYtOWE0OC0zYjk0YjIyMWQyMjA=?imageView&stripmeta=1&quality=80&interlace=1&rotate=90&thumbnail=80z20
预览去除图片元信息
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- 去除后的图片将不包含 EXIF 信息
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var stripMetaUrl = nim.viewImageStripMeta({
url: url,
strip: true
});
预览图片质量
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- 默认图片质量为100,开发者可以降低图片质量来省流量
javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var qualityUrl = nim.viewImageQuality({
url: url,
quality: 20
});
// 预览图片质量后的图片 url 如下
// qualityUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&quality=20'
// 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的预览图片质量的结果
预览interlace图片
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- 在网络环境较差时, interlace 后的图片会以从模糊到清晰的方式呈现给用户
javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var interlaceUrl = nim.viewImageInterlace({
url: url
});
// interlace 后的图片 url 如下
// interlaceUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&interlace=1'
预览旋转图片
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var rotateUrl = nim.viewImageRotate({
url: url,
angle: 90
});
// 旋转后的图片的 url 如下
// rotateUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&rotate=90'
// 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的旋转结果
预览高斯模糊图片
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var blurUrl = nim.viewImageBlur({
url: url,
radius: 5,
sigma: 3
});
// 高斯模糊后的图片 url 如下
// blurUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&blur=5x3'
// 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的高斯模糊后的结果
预览裁剪图片
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- 从坐标 (x, y) 处截取尺寸为 width*height 的图片,(0, 0) 代表左上角
- width/height 不能小于0, 如果 width/height 大于图片的原始宽度/高度, 那么将被替换为图片的原始宽度/高度
- 举个栗子, 假如说之前通过预览文件拿到的 url 为 https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=
- 传入 x/y/width/height 为 100/0/250/250 得到的裁剪图片的 url 为 https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&crop=100_0_250_250
- 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的裁剪结果
javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var cropUrl = nim.viewImageCrop({
url: url,
x: 100,
y: 0,
width: 250,
height: 250
});
// 裁剪后的图片的 url 如下
// cropUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&crop=100_0_250_250'
// 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的裁剪结果
预览生成缩略图
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- width/height 限制了缩略图的尺寸
- width/height 必须大于等于 0, 不能同时为 0, 必须小于 4096
- 不同模式下生成的缩略图是不一样的, 目前支持以下三种模式
'cover'
: 原图片等比缩略, 缩略图一边等于请求的尺寸, 另一边大于请求的尺寸, 即缩略图刚好能覆盖住尺寸为 width*height 的矩形- 举个栗子, 假如说之前通过预览文件拿到的 url 为 https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=
- 此模式下传入 80*100 的尺寸得到的缩略图 url 为 https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80z100
- 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同尺寸得到的缩略图
'contain'
: 原图片等比缩略, 缩略图一边等于请求的尺寸, 另一边大于请求的尺寸, 即尺寸为 width*height 的矩形刚好能覆盖住缩略图- 还是拿上面的 url 为例, 传入 80*100 的尺寸得到的缩略图 RUL 为 https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80x100
- 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同尺寸得到的缩略图
'crop'
: 先等比缩略原图片, 使得一边等于请求的尺寸, 另一边大于请求的尺寸, 然后对大于请求尺寸的那条边进行裁剪, 使得最终的图片大小刚好等于请求的尺寸(注:crop
模式不支持将动图缩略为动图)- 还是拿上面的 url 为例, 传入 80*100 的尺寸得到的缩略图 url 为 https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100
- 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同尺寸得到的缩略图
- 如果缩略图尺寸大于图片尺寸,默认情况下图片不会被放大,可以传入参数
enlarge=true
来放大图片- 举个栗子, 假如说之前通过预览文件拿到的 url 为 https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=
- 此 url 对应的图片尺寸为 512-256, 如果使用
'cover'
模式来裁剪, 传入尺寸 1024-512, 得到的缩略图 url 为 https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=1024z512 - 会发现图片尺寸并没有放大, 如果再传入参数
enlarge=true
, 得到的缩略图 url 为 https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=1024z512&enlarge=1 - 会发现图片被放大了
'crop'
模式下可以传入参数 axis.x 或 axis.y 来控制最后一步裁剪的位置- x/y 必须为整数, 取值范围为 0-10, 此方法内部使用 Math.round 来格式化 x/y
- x 为 0 时表示裁取最左端, x 为 10 时表示裁取最右端
- y 为 0 时表示裁取最上端, y 为 10 时表示裁取最下端
- x/y 默认值均为 5, 即裁取正中间
- 拿上面的 url 为例, 传入 80*100 的尺寸得到的缩略图 url 为
https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100
- 依次传入 x=0,1,2,3,4,5,6,7,8,9,10 得到的缩略图 url 为
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=0_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=1_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=2_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=3_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=4_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=5_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=6_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=7_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=8_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=9_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=10_5
- 依次传入 x=0,1,2,3,4,5,6,7,8,9,10 得到的缩略图 url 为
- 拿上面的 url 为例, 传入 200*50 的尺寸得到的缩略图 RUL 为
https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50
- 依次传入 y=0,2,4,6,8,10 得到的缩略图 url 为
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_0
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_1
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_2
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_3
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_4
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_5
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_6
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_7
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_8
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_9
- https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=200y50&axis=5_10
- 依次传入 y=0,2,4,6,8,10 得到的缩略图 url 为
javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var thumbnailUrl = nim.viewImageThumbnail({
url: url,
mode: 'cover',
width: 80,
height: 100
});
// 缩略后的图片的 url 如下
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80z100'
// 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的裁剪结果
*
thumbnailUrl = nim.viewImageThumbnail({
url: url,
mode: 'contain',
width: 80,
height: 100
});
// 缩略后的图片的 url 如下
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80x100'
// 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的裁剪结果
*
thumbnailUrl = nim.viewImageThumbnail({
url: url,
mode: 'contain',
width: 80,
height: 100
});
// 缩略后的图片的 url 如下
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100'
// 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的裁剪结果
thumbnailUrl = nim.viewImageThumbnail({
url: url,
mode: 'contain',
width: 80,
height: 100,
axis: {
// x 可取的值请参考上文描述
x: 0
}
});
// 缩略后的图片的 url 如下
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=0_5'
// 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的裁剪结果
thumbnailUrl = nim.viewImageThumbnail({
url: url,
mode: 'contain',
width: 80,
height: 100,
axis: {
// y 可取的值请参考上文描述
y: 0
}
});
// 缩略后的图片的 url 如下
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=5_0'
// 开发者在浏览器中打开上面的链接之后, 可以直接修改 url 里面的数字来观察不同的裁剪结果
去除图片元信息
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- 去除后的图片将不包含 EXIF 信息
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
nim.stripImageMeta({
url: url,
strip: true,
done: stripImageMetaDone
});
function stripImageMetaDone(error, obj) {
console.log('去除图片元信息' + (!error?'成功':'失败'), error, obj);
}
修改图片质量
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- 默认图片质量为100,开发者可以降低图片质量来省流量
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var qualityUrl = nim.qualityImage({
url: url,
quality: 5,
done: qualityImageDone
});
function qualityImageDone(error, obj) {
console.log(error);
console.log(obj);
console.log('修改图片质量' + (!error?'成功':'失败'));
}
interlace图片
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- 在网络环境较差时, interlace 后的图片会以从模糊到清晰的方式呈现给用户
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var interlaceUrl = nim.interlaceImage({
url: url,
done: interlaceImageDone
});
function interlaceImageDone(error, obj) {
console.log(error);
console.log(obj);
console.log('interlace 图片' + (!error?'成功':'失败'));
}
旋转图片
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var rotateUrl = nim.rotateImage({
url: url,
angle: 90,
done: rotateImageDone
});
function rotateImageDone(error, obj) {
console.log(error);
console.log(obj);
console.log('旋转图片' + (!error?'成功':'失败'));
}
高斯模糊图片
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var blurUrl = nim.blurImage({
url: url,
radius: 5,
sigma: 3,
done: blurImageDone
});
function blurImageDone(error, obj) {
console.log(error);
console.log(obj);
console.log('高斯模糊图片' + (!error?'成功':'失败'));
}
裁剪图片
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- 从坐标 (x, y) 处截取尺寸为 width*height 的图片,(0, 0) 代表左上角
- width/height 不能小于0, 如果 width/height 大于图片的原始宽度/高度, 那么将被替换为图片的原始宽度/高度
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var cropUrl = nim.cropImage({
url: url,
x: 100,
y: 0,
width: 250,
height: 250,
done: function cropImageDone
});
function cropImageDone(error, obj) {
console.log(error);
console.log(obj);
console.log('裁剪图片' + (!error?'成功':'失败'));
}
生成缩略图
- 只支持通过预览文件或发送文件消息拿到的图片 url, 或者经过其他图片操作后拿到的图片 url
- width/height 限制了缩略图的尺寸
- width/height 必须大于等于 0, 不能同时为 0, 必须小于 4096
- 不同模式下生成的缩略图是不一样的, 目前支持以下三种模式
'cover'
: 原图片等比缩略, 缩略图一边等于请求的尺寸, 另一边大于请求的尺寸, 即缩略图刚好能覆盖住尺寸为 width*height 的矩形'contain'
: 原图片等比缩略, 缩略图一边等于请求的尺寸, 另一边大于请求的尺寸, 即尺寸为 width*height 的矩形刚好能覆盖住缩略图'crop'
: 先等比缩略原图片, 使得一边等于请求的尺寸, 另一边大于请求的尺寸, 然后对大于请求尺寸的那条边进行裁剪, 使得最终的图片大小刚好等于请求的尺寸(注:crop模式不支持将动图缩略为动图)
- 如果缩略图尺寸大于图片尺寸,默认情况下图片不会被放大,可以传入参数
enlarge=true
来放大图片 'crop'
模式下可以传入参数 axis.x 或 axis.y 来控制最后一步裁剪的位置- x/y 必须为整数, 取值范围为 0-10, 此方法内部使用 Math.round 来格式化 x/y
- x 为 0 时表示裁取最左端, x 为 10 时表示裁取最右端
- y 为 0 时表示裁取最上端, y 为 10 时表示裁取最下端
- x/y 默认值均为 5, 即裁取正中间
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var thumbnailUrl = nim.thumbnailImage({
url: url,
mode: 'cover',
width: 80,
height: 100,
done: thumbnailImageDone
});
function thumbnailImageDone(error, obj) {
console.log(error);
console.log(obj);
console.log('生成缩略图' + (!error?'成功':'失败'));
}
处理图片
此方法接收一组图片操作, 按操作顺序依次处理图片, 可选的操作包括:
每个操作所需的参数请参考上面的各个方法, 除了上面方法列出来的参数之外, 每个操作需要提供操作类型, 分别是
'quality'
'interlace'
'rotate'
'blur'
'crop'
'thumbnail'
javascript// 裁剪后旋转
var url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
nim.processImage({
url: url,
ops: [
{
type: 'crop',
x: 100,
y: 0,
width: 250,
height: 250,
},
{
type: 'thumbnail',
mode: 'cover',
width: 80,
height: 80
}
],
done: processImageDone
});
function processImageDone(error, obj) {
console.log(error);
console.log(obj);
console.log('处理图片' + (!error?'成功':'失败'));
}
修改图片下载的名字
- 此方法会返回一个新的地址
var url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var nameUrl = nim.packFileDownloadName({
url: url,
name: '测试.jpg'
});
console.log(nameUrl);
将音频url转为mp3
- 此方法会返回一个新的地址
var url = 'http://b12026.nos.netease.com/MTAxMTAxMA==/bmltYV8xMTQwMzFfMTQ1MTg4ODk5MjMxMV9mNmI1Y2QyZC03N2UzLTQxNmUtYWY5NC1iODlhZGY4ZTYzYWQ=';
var mp3Url = nim.audioToMp3({
url: url
});
console.log(mp3Url);
语音转文字
- 仅支持通过预览文件或者发送文件消息拿到的音频 url, 或者收到的音频消息的 url
var url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ1MTg5MDI2MjY0MF9lYzk1MWMyZC1hMzRmLTQ1YzctYWI2ZS1kZWE2NTA2M2Q4NjY=';
nim.audioToText({
url: url,
done: audioToTextDone
});
function audioToTextDone(error, obj) {
console.log('语音转文字' + (!error?'成功':'失败'), error, obj);
}
数据转BLOB
- 将包含 MIME type 和 base64 数据的 data URL 转换为 Blob 对象
javascriptvar dataURL = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAyADIDASIAAhEBAxEB/8QAGgABAAMBAQEAAAAAAAAAAAAAAAIEBgUDAf/EACwQAAEEAQMCBQMFAQAAAAAAAAEAAgMRBAUSISIxBhNBUWEUMnEjkaGxstH/xAAaAQACAwEBAAAAAAAAAAAAAAAAAQIDBAUG/8QAIREAAgIBAwUBAAAAAAAAAAAAAAECERIEFCExM0FxodH/2gAMAwEAAhEDEQA/ANkiKtm5gxI203fK87Y2XVnv+w7lXNpK2ebLKhHMyUuDHbtpokdr9lksjPzM187pMowYEBIfKw7TIR3ArsL4vuquJNlYenYub9TPE2U1I272lx4cGngjtYPp8rPuoWLI3SLlaTqr8pz8XLa2PNiHW1vZw9CPhdVXxkpK0MIiKQBZzXcgxZGVJz+hh20D3cTf+QtE40LDS4+gaLJXE13FfFqNSxyRvkg8qTpI2HktPNe7gVRqe2x4tqzh5OP5PhAxMaDULXHn1sElWtQo+HJdvb6cEbvwP5VbLex3hzJxnSmSXHjDJKFciq49vlT1SYjw8xrTuknYyNu1v3E1dD8WuZza9kPwSymAaRnMNzF7GFx4LmubyCtoOyxpx/q9UwtMi3mPGAllcfgU3n3WyW/SJ4EkERFrA+EWORahkxszJnS5QEz3MEZMguwBX9eq9FFzA4EEWCk0n1HbqjN5GmQyajKxkhDiwxuO8dba+1xruOVX1DCZp2JFPNlDysZrY4uN5DjxurgE178LRnToDN5vXd9r4UpNPxZQBLE14BsB3ItZ9tF3Y4OKmnNWvPNfTx0zAxsKHdj9Zl63yu5dIT6n/ivqLWNY3a0ABSWhJJUiIRETAIiIAIiIAIiIAIiIA//Z';
var blob = NIM.blob.fromDataURL(dataURL);
// blob instanceof Blob === true;
NOS文件短链换源链
- 仅支持通过预览文件或者发送文件消息拿到的NOS文件安全短链 url, 或者收到消息的NOS文件安全短链 url
nim.getNosOriginUrl({
safeShortUrl: 'url', // NOS文件安全短链地址
done: getNosOriginUrlDone
});
function getNosOriginUrlDone(error, originUrl) {
console.log('NOS文件安全短链替换' + (!error ? '成功' : '失败'), error, originUrl)
}
搜索本地内容
具体参见API文档搜索本地内容
此文档是否对你有帮助?