Skip to content

decoder.md

Latest commit

 

History

History
313 lines (221 loc) · 16.4 KB

decoder.md

File metadata and controls

313 lines (221 loc) · 16.4 KB
Raw

Decoder

Translations: 简体中文

Decoder is used to read data from DataSource and decode images, and each image type supported by Sketch is supported by a corresponding Decoder, as shown in the following table:

Decoder Format Dependent modules Android iOS macOS Native Desktop Web
SkiaDecoder jpeg, png, webp, bmp - ❌ ✅ ✅ ✅ ✅
BitmapFactoryDecoder jpeg, png, webp, bmp, heif (API 27), avif (API 31) - ✅ ❌ ❌ ❌ ❌
AwxkeeAvifDecoder heif (API 24), avif (API 24) sketch-avif-awxkee ✅ ❌ ❌ ❌ ❌
PhotosAssetDecoder jpeg, png, webp, bmp, heif, heif (ios 11), avif (ios 16) - ❌ ✅ ❌ ❌ ❌
UIImageDecoder heif (ios 11), avif (ios 16) - ❌ ✅ ❌ ❌ ❌
SkiaGifDecoder gif (Not Support resize) sketch-animated-gif ❌ ✅ ✅ ✅ ✅
MovieGifDecoder gif (Not Support resize) sketch-animated-gif ✅ ❌ ❌ ❌ ❌
ImageDecoderGifDecoder gif (API 28) sketch-animated-gif ✅ ❌ ❌ ❌ ❌
KoralGifDecoder gif sketch-animated-gif-koral ✅ ❌ ❌ ❌ ❌
ImageDecoderAnimatedWebpDecoder Animated webp (API 28) sketch-animated-webp ✅ ❌ ❌ ❌ ❌
SkiaAnimatedWebpDecoder Animated webp (Not Support resize) sketch-animated-webp ❌ ✅ ✅ ✅ ✅
ImageDecoderAnimatedHeifDecoder Animated heif (API 30) sketch-animated-heif ✅ ❌ ❌ ❌ ❌
SvgDecoder svg (CSS is not supported on non-Android) sketch-svg ✅ ✅ ✅ ✅ ✅
VideoFrameDecoder Video frame sketch-video ✅ ❌ ❌ ❌ ❌
FFmpegVideoFrameDecoder Video frame sketch-video-ffmpeg ✅ ❌ ❌ ❌ ❌
PhotosAssetVideoFrameDecoder Video frame sketch-video ❌ ✅ ❌ ❌ ❌
FileVideoFrameDecoder Video frame sketch-video ❌ ✅ ✅ ❌ ❌
BlurHashDecoder BlurHash sketch-blurhash ✅ ✅ ✅ ✅ ✅
ApkIconDecoder Apk Icon sketch-extensions-core ✅ ❌ ❌ ❌ ❌
DrawableDecoder Andoid res drawable - ✅ ❌ ❌ ❌ ❌

The uses of each Decoder are as follows:

Important

  • The built-in Fetchers that do not rely on additional modules have been registered.
  • Fetchers that rely on additional modules also support automatic registration. You only need to configure the dependencies.
  • If you need to register manually, please read the documentation: 《Register component》

Decode static images

Android platform

On the Android platform, BitmapFactoryDecoder is mainly used to decode static images, and BitmapFactoryDecoder is used to decode images using Android's built-in BitmapFactory.

For images in avif and heif formats, if you need to be compatible with API 24 version, you can use sketch-avif-awxkee AwxkeeAvifDecoder decoder provided by module

Desktop and Web platforms

On desktop and web platforms, SkiaDecoder is mainly used to decode static images, and SkiaDecoder uses Skia's built-in image to decode images.

iOS platform

The ios platform also mainly uses SkiaDecoder to decode static images.

Since SkiaDecoder does not support heif and avif format images, UIImageDecoder is used by default as a supplement to specifically decode heif and pictures in avif format

For images from the Photos Library, PhotosAssetDecoder will be used to decode the images, and PhotosAssetDecoder will use the iOS native PHImageManager to decode the images, so that the system can use its own capabilities to support more image formats.

If you want to use SkiaDecoder to decode images from the Photos Library, you can do so with the useSkiaForImagePhotosAsset() function, as follows:

val imageUri = newPhotosAssetUri("DB16113B-984A-4D12-B4D0-50FC46066781/L0/001")
val request = ImageRequest(context, imageUri) {
    useSkiaForImagePhotosAsset(true)
}
AsyncImage(
    request = request,
    contentDescription = "photo"
)

PhotosAssetUriFetcher will read all the original image data into memory after fetch after detecting that useSkiaForImagePhotosAsset is true, and then wrap it into a ByteArrayDataSource for SkiaDecoder to decode

If you also want to cache the raw data of the images from the Photos Library into the download cache and wrap them into a FileDataSource for SkiaDecoder to decode, you can do so using the preferFileCacheForImagePhotosAsset() function, as follows:

val imageUri = newPhotosAssetUri("DB16113B-984A-4D12-B4D0-50FC46066781/L0/001")
val request = ImageRequest(context, imageUri) {
    useSkiaForImagePhotosAsset(true)
    preferFileCacheForImagePhotosAsset(true)
}
AsyncImage(
    request = request,
    contentDescription = "photo"
)

Decode animated images

Decode animated images, please refer to the documentation: 《Animated Image》

Decode SVG

Decode SVG, refer to the documentation: 《SVG》

Decode video frame

Decode video frame, refer to the documentation: 《Video Frame》

Decode BlurHash

Decode BlurHash, refer to the documentation: 《BlurHash》

Decode APK icon

Decode the APK icon, please refer to the documentation: 《Load Apk Icon》

Decode Android Drawable

On the Android platform, DrawableDecoder is mainly used to decode xml drawable images supported by Android, such as vector and shape, and its principle is to draw the Drawable onto the Bitmap, so the Drawable must have an intrinsic dimension.

Custom Decoder

First implement the Decoder interface to define your Decoder and its Factory

Pay attention to the value of the Decoder.sortWeight attribute, which determines the position of the current Decoder in the Decoder list. The larger the value, the further back in the list. The value range is 0 ~ 100

Then refer to the document 《Register component》 to register your Decoder.

Caution

  1. Customizing Decoder requires applying many properties related to image quality and size in ImageRequest, such as size, colorType, colorSpace, etc. You can refer to other Decoder implementations
  2. If your Decoder is decoding animated images, you must determine the ImageRequest .disallowAnimatedImage parameter.

Decoding Properties

BitmapColorType

BitmapColorType is used to set the color type of the bitmap. The optional values are:

  • FixedColorType: always use the specified color type
  • LowQualityColorType: Prioritize low-quality color types
    • jpeg images on the Android platform use RGB_565, and other values use the default value.
    • jpeg and webp images on non-Android platforms use RGB_565, others use ARGB_4444
  • HighQualityColorType: Give priority to high-quality color types
    • On the Android platform, API 26 and above use RGBA_F16, and others use the default value.
    • Always use RGBA_F16 on non-Android platforms

Example:

ImageRequest(context, "https://example.com/image.jpg") {
    // Use specified color type on Android platform
    colorType(Bitmap.Config.RGB_565)

    // Use specified color type on non-Android platforms
    colorType(ColorType.RGBA_F16)

    // Prioritize lower quality color types
    colorType(LowQualityColorType)

    // Prioritize high-quality color types
    colorType(HighQualityColorType)
}

BitmapColorSpace

BitmapColorSpace is used to set the color space of the bitmap. The optional values are:

  • FixedColorSpace: Always use the specified color space

Example:

ImageRequest(context, "https://example.com/image.jpg") {
    // Use specified color space on Android platform
    colorSpace(ColorSpace.Named.DISPLAY_P3)

    // Use specified color space on non-Android platforms
    colorSpace(ColorSpace.displayP3)
}

preferQualityOverSpeed

preferQualityOverSpeed is used to set quality priority when decoding. It can only be used on the Android platform.

Example:

ImageRequest(context, "https://example.com/image.jpg") {
    preferQualityOverSpeed(true)
}