工具方法

更新时间: 2024/03/27 18:04:29

图片操作

使用预览文件和发送文件消息拿到图片 url 之后,可以调用 SDK 提供的图片操作来处理图片, 所有的操作在 NIM 和 Chatroom 上都提供, 下文仅以 NIM 为例给出使用方法, 图片操作分为两大类

预览图片通用方法

  • 代码示例
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 里面的数字来观察不同的高斯模糊后的结果

预览裁剪图片

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 里面的数字来观察不同的裁剪结果

预览生成缩略图

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文档搜索本地内容

此文档是否对你有帮助?
有帮助
去反馈
  • 图片操作
  • 预览图片通用方法
  • 预览去除图片元信息
  • 预览图片质量
  • 预览interlace图片
  • 预览旋转图片
  • 预览高斯模糊图片
  • 预览裁剪图片
  • 预览生成缩略图
  • 去除图片元信息
  • 修改图片质量
  • interlace图片
  • 旋转图片
  • 高斯模糊图片
  • 裁剪图片
  • 生成缩略图
  • 处理图片
  • 修改图片下载的名字
  • 将音频url转为mp3
  • 语音转文字
  • 数据转BLOB
  • NOS文件短链换源链
  • 搜索本地内容