Documentation
Instant Messaging
English
Getting StartedResourcesConceptsQuickstartGuidesClient APIsServer APIs
WhatsApp
Web
Install IM SDK
Browser script
Initialize SDK and login
Initializing the SDK
Login and Logout
Message
Notifications
Team notifications
Superteam notifications
Message History
Extensions
Recent Chats
User
User Profile
Friend Data
Relation Data
User presence
Team channel
Superteam channel
Enable and configure superteam
Manage supergroups
Chat room
Manage chatrooms
Moderation
High-availability domains
File storage
Utilities
AI chatbot
Enable and configure AI chatbot
Using AI chatbot
Best Practices
DocumentationInstant MessagingGuidesUtilities

Utilities

Update time: 2024/03/14 18:45:32

Image operation

After getting image URL with Preview files and Send file messages, you can invoke image operations that are provided by SDK to process images. All operations are provided for NIM and chat room. Only NIM is taken as an example to describe the operation. The image operations include the following two types:

Method of previewing images

  • Code example
javascript  var url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
  var newImageUrl = nim.viewImageSync({
    url: url, // required
    strip: true, // remove image meta information true or false optional
    quality: 80, // image quality 0 - 100 optional
    interlace: true, // gradually clear, optional
    rotate: 90, // rotation angle, clockwise, optional
    thumbnail: { // generate thumbnail, optional
      width: 80,
      height: 20,
      mode: cover
    }
  });
  • An example of newImageUrl: http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ2OTUyMDc1NzAyNl8wMTA0NmIyMi0yNTQzLTQ2OTYtOWE0OC0zYjk0YjIyMWQyMjA=?imageView&stripmeta=1&quality=80&interlace=1&rotate=90&thumbnail=80z20

Preview "remove image meta-information"

  • Only apply to image URL acquired with Preview files or Send file messages or image URL acquired after other image operations.
  • After the meta-information is removed, the image will not contain EXIF information.
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var stripMetaUrl = nim.viewImageStripMeta({
  url: url,
  strip: true
});

Preview image quality

  • Only apply to image URL acquired with Preview files or Send file messages or image URL acquired after other image operations.
  • The image quality is 100 by default. Developers can decrease image quality to save flow.
javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var qualityUrl = nim.viewImageQuality({
    url: url,
    quality: 20
});
// The image url after image preview is as follows
// qualityUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&quality=20'
// After opening the above link in the browser, the developer can change the figure in the url to observe the quality results of different preview images

Preview Interlace images

  • Only apply to image URL acquired with Preview files or Send file messages or image URL acquired after other image operations.
  • Under worse network environment, interlaced image will be presented to users from fuzzy to clear mode.
javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var interlaceUrl = nim.viewImageInterlace({
    url: url
});
// interlaced image url is as follows
// interlaceUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&interlace=1'

Preview "rotate image"

javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var rotateUrl = nim.viewImageRotate({
    url: url,
    angle: 90
});
// The rotated image url is as follows
// rotateUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&rotate=90'
// After opening the above link in the browser, the developer can change the figure in the url to observe different rotation results

Preview Gaussian blur imagess

javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var blurUrl = nim.viewImageBlur({
    url: url,
    radius: 5,
    sigma: 3
});
// The Gaussian blurred image url is as follows
// blurUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&blur=5x3'
// After opening the above link in the browser, the developer can change the figure in the url to observe different results after Gaussian blur

Preview "crop image"

javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var cropUrl = nim.viewImageCrop({
    url: url,
    x: 100,
    y: 0,
    width: 250,
    height: 250
});
// The cropped image url is as follows
// cropUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&crop=100_0_250_250'
// After opening the above link in the browser, the developer can change the figure in the url to observe different cropping results

Preview "generate thumbnail"

javascriptvar url = 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var thumbnailUrl = nim.viewImageThumbnail({
    url: url,
    mode: 'cover',
    width: 80,
    height: 100
});
// The thumbnailed image url is as follows
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80z100'
// After opening the above link in the browser, the developer can change the figure in the url to observe different cropping results
 *
thumbnailUrl = nim.viewImageThumbnail({
    url: url,
    mode: 'contain',
    width: 80,
    height: 100
});
// The thumbnailed image url is as follows
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80x100'
// After opening the above link in the browser, the developer can change the figure in the url to observe different cropping results
 *
thumbnailUrl = nim.viewImageThumbnail({
    url: url,
    mode: 'contain',
    width: 80,
    height: 100
});
// The thumbnailed image url is as follows
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100'
// After opening the above link in the browser, the developer can change the figure in the url to observe different cropping results

thumbnailUrl = nim.viewImageThumbnail({
    url: url,
    mode: 'contain',
    width: 80,
    height: 100,
    axis: {
        // Refer to the above description for the value of x
        x: 0
    }
});
// The thumbnailed image url is as follows
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=0_5'
// After opening the above link in the browser, the developer can change the figure in the url to observe different cropping results

thumbnailUrl = nim.viewImageThumbnail({
    url: url,
    mode: 'contain',
    width: 80,
    height: 100,
    axis: {
        // Refer to the above description for the value of y
        y: 0
    }
});
// The thumbnailed image url is as follows
// thumbnailUrl === 'https://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=?imageView&thumbnail=80y100&axis=5_0'
// After opening the above link in the browser, the developer can change the figure in the url to observe different cropping results

Remove image meta-information

  • Only apply to image URL acquired with Preview files or Send file messages or image URL acquired after other image operations.
  • After the meta-information is removed, the image will not contain EXIF information.
javascriptvar url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
nim.stripImageMeta({
  url: url,
  strip: true,
  done: stripImageMetaDone
});
function stripImageMetaDone(error, obj) {
  console.log('remove image meta information' + (!error?'succeeded':'failed’), error, obj);
}

Modify image quality

  • Only apply to image URL acquired with Preview files or Send file messages or image URL acquired after other image operations.
  • The image quality is 100 by default. Developers can decrease image quality to save flow.
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('modify image quality' + (!error?'succeeded':'failed’));
}

Interlace images

  • Only apply to image URL acquired with Preview files or Send file messages or image URL acquired after other image operations.
  • Under worse network environment, interlaced image will be presented to users from fuzzy to clear mode.
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 images' + (!error?'succeeded':'failed'));
}

Rotate images

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('rotate image' + (!error?'succeeded':'failed'));
}

Gaussian blur images

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('Gaussian blurr image’’ + (!error?'succeeded':'failed));
}

Crop images

  • Only apply to image URL acquired with Preview files or Send file messages or image URL acquired after other image operations.
  • The image with size width*height is cropped from coordinates (x, y). (0, 0) means left corner.
  • The width/height cannot be smaller than 0. If width/height is larger than original width/height of an image, the cropped image will be changed to original size.
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('crop image' + (!error?'succeeded':'failed'));
}

Generate thumbnails

  • Only apply to image URL acquired with Preview files or Send file messages or image URL acquired after other image operations.
  • width/height limits size of thumbnail.
    • width/height must be larger than and equal to 0; otherwise, must be smaller than 4096.
  • The thumbnails that are generated under different modes are different. The following three modes are available now.
    • 'cover': The original image is cropped in equal ratio. For the thumbnail, one side is equal to requested size and the other side is larger than requested size, i.e. the thumbnail can just cover the rectangle with size width*height.
    • 'contain': The original image is cropped in equal ratio. For the thumbnail, one side is equal to requested size and the other side is larger than requested size, i.e. the rectangle with size width*height can just cover the thumbnail.
    • 'crop': The original image is cropped in equal ratio, as a result, one side can be equal to requested size and the other side is larger than requested size. Then the side with size larger than requested size is cropped to make final image size be equal to requested size (Note: The crop mode is not available to crop dynamic image.)
  • If cropped size is larger than image size, the image will not be enlarged by default. The parameterenlarge=truecan be input to enlarge image.
  • Under the mode'crop' , you can input parameter axis.x or axis.y to control the final crop position.
    • x/y must be integer with value range 0-10. The Math.round is used to format x/y.
    • If x is 0, the crop position is the left end. If x is 10, the crop position is the right end.
    • If y is 0, the crop position is the top end. If y is 10, the crop position is the bottom end.
    • If the default value of x/y is 5, the crop position is the middle part.
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('generate thumbnail' + (!error?'succeeded':'failed'));
}

Process images

The API receives a group of image operations and the image is processed in operation sequence. The optional operations include:

For required parameter of each operation, see above APIs. In addition to above-mentioned parameters, each operation needs to provide operation type as below:

  • 'quality'
  • 'interlace'
  • 'rotate'
  • 'blur'
  • 'crop'
  • 'thumbnail'
javascript// Rotation after cropping
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('process image' + (!error?'succeeded':'failed'));
}

Modify downloaded name of image

  • It will return a new address.
var url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ0MzE0NTgyNDI0M184YjFkYTMwMS02NjcxLTRiYjktYTUwZC04ZTVlZjZlNzZjMzA=';
var nameUrl = nim.packFileDownloadName({
    url: url,
    name: 'Test.jpg'
});
console.log(nameUrl);

Transform audio url into mp3

  • It will return a new address.
var url = 'http://b12026.nos.netease.com/MTAxMTAxMA==/bmltYV8xMTQwMzFfMTQ1MTg4ODk5MjMxMV9mNmI1Y2QyZC03N2UzLTQxNmUtYWY5NC1iODlhZGY4ZTYzYWQ=';
var mp3Url = nim.audioToMp3({
    url: url
});
console.log(mp3Url);

Voice-to-text

var url = 'http://nim.nos.netease.com/MTAxMTAwMg==/bmltYV8xNDc5OTNfMTQ1MTg5MDI2MjY0MF9lYzk1MWMyZC1hMzRmLTQ1YzctYWI2ZS1kZWE2NTA2M2Q4NjY=';
nim.audioToText({
    url: url,
    done: audioToTextDone
});
function audioToTextDone(error, obj) {
    console.log('voice-to-text' + (!error?'succeeded':'failed''), error, obj);
}

Transform data into BLOB

  • The data URL that contains MIME type and base64 data into Blob object.
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;
  • Only apply to secure short link url of NOS file acquired with Preview files or Send file messages or received secure short link url of NOS file for message.
nim.getNosOriginUrl({
    safeShortUrl: 'url', // NOS file secure short link
    done: getNosOriginUrlDone
});
function getNosOriginUrlDone(error, originUrl) {
    console.log('replace NOS file secure short link' + (!error ? 'succeeded':'failed'), error, originUrl)
}

Search local content

For details, see AP Document Search local content.

WhatsApp
Was this page helpful?
Yes
No
  • Image operation
  • Method of previewing images
  • Preview "remove image meta-information"
  • Preview image quality
  • Preview Interlace images
  • Preview "rotate image"
  • Preview Gaussian blur imagess
  • Preview "crop image"
  • Preview "generate thumbnail"
  • Remove image meta-information
  • Modify image quality
  • Interlace images
  • Rotate images
  • Gaussian blur images
  • Crop images
  • Generate thumbnails
  • Process images
  • Modify downloaded name of image
  • Transform audio url into mp3
  • Voice-to-text
  • Transform data into BLOB
  • Transform short link of NOS file into source link
  • Search local content