LittlevGL图形框架扩展 - JPEG图片的支持

简介: 在轻量级RTOS GUI图形库中,LittlevGL是一个使用C语言开发,开源免费的GUI,支持触摸屏,鼠标,键盘多种操作,移植简单方便,在丰富的控件基础上还可以自定义控件,开发者一直在不断完善更新,相对于其他GUI,LittlevGL在硬件资源不足(RAM < 100kbytes)的情况下存在较大的优势,在240*240的显示屏上显示一张图片,RAM缓冲区设置为2Kbytes即可。AliOS Things 目前最新版本已经集成LittlevGL,并且在智能穿戴设备项目上已商用。
转自HaaS技术社区

在轻量级RTOS GUI图形库中,LittlevGL是一个使用C语言开发,开源免费的GUI,支持触摸屏,鼠标,键盘多种操作,移植简单方便,在丰富的控件基础上还可以自定义控件,开发者一直在不断完善更新,相对于其他GUI,LittlevGL在硬件资源不足(RAM < 100kbytes)的情况下存在较大的优势,在240*240的显示屏上显示一张图片,RAM缓冲区设置为2Kbytes即可。

AliOS Things 目前最新版本已经集成LittlevGL,并且在智能穿戴设备项目上已商用。

image.png

LittlevGL对于图片跟字体的使用是预先要使用外部工具,对图片跟字体转成二进制文件,然后直接使用,在一些简单固定显示的应用场景是可以满足的,而且对内存消耗会比较少。但是在一些复杂的应用场景就无法满足了,比如相机应用中拍照生成的图片格式大多为JPEG的,相册中显示图片就无法提前进行转换,或者遇到服务端下发JEPG图片情况,因此需要对LittlevGL进行扩展。

开源libJPEG库是用于编码数据为JPEG格式或者解码JPEG格式图片的常用库,而libJPEG-turbo则效率更高。考虑到未来除了需要解码JPEG可能还会遇到需要压缩JPEG图片的场景,因此最终使用libJPEG-turbo来丰富LittlevGL对图片支持。

JPEG图像的解压缩操作过程

1.为JPEG对象分配空间并初始化

2.指定解压缩数据源

3.获取文件信息

4.为解压缩设定参数,包括图像大小,颜色空间

5.开始解压缩

6.取出数据

7.解压缩完毕

8.释放资源

为JPEG对象分配空间并初始化

解压缩过程中使用的JPEG对象是一个jpeg_decompress_struct的结构体。同时还需要定义一个用于错误处理的结构体对象,标准的错误结构体是jpeg_error_mgr。

#if !USE_LV_DRAW_IMG_JPEG_DECODER_HW_MODE
 
static struct jpeg_decompress_struct jpeg_info;
 
static struct jpeg_error_mgr jpeg_error_mgr;
 
#endif

初始化jpeg_info结构,并将错误处理结构对象绑定在JPEG对象上,这个标准的错误处理结构将使程序在出现error时调用exit退出程序,如果不希望使用标准的错误处理方式,则可以通过自定义退出函数的方法自定义错误处理结构。

    jpeg_create_decompress(&jpeg_info);
 
    jpeg_info.err = jpeg_std_error(&jpeg_error_mgr);
 
    jpeg_error_mgr.error_exit = jpeg_error_exit;

对jpeg_info分配内存并将图片的缺省信息填充到jpeg_info。

    jpeg_mem_src(&jpeg_info, data_buf, img_dsc->data_size);
 
 
    if(jpeg_read_header(&jpeg_info, TRUE) == -1) {
 
        LOGE("lv_img_decoder_open_jpeg: read header err !!\n");
 
        if(from_file == 1) {
 
            jpeg_free(data_buf);
 
            data_buf = NULL;
 
        }
 
        return LV_IMG_DECODER_OPEN_FAIL;
 
    }

此时,常见的可用信息包括图像的宽jpeg_info.image_width,高jpeg_info.image_height,色彩空间jpeg_info.jpeg_color_space,颜色通道数jpeg_info.num_components等。在完成jpeg_read_header调用后,开始解压缩之前就可以进行解压缩参数的设定,也就是为jpeg_info结构的成员赋值。

可以设定解出来的图像与原图的比例,也可以设定输出图像的色彩空间,即cinfo.out_color_space。原图比例是使用scale_num和scale_denom两个参数,解出来的图像大小就是scale_num/scale_denom,当前仅支持1/1, 1/2, 1/4,和1/8这几种缩小比例,如果没有额外要求,以上参数使用默认即可。

比如要取得1/2原图的图像,把一个原本彩色的图像由真彩色JCS_RGB变为灰度JCS_GRAYSCALE。需要如下设定:

    jpeg_info.scale_num=1;
 
    jpeg_info.scale_denom=2;
 
    jpeg_info.out_color_space=JCS_GRAYSCALE;

根据设定的解压缩参数进行图像解压缩操作。

    if((jpeg_start_decompress(&jpeg_info) == false) || (jpeg_err == 1)) {
 
        LOGE("lv_img_decoder_open_jpeg: decompress failed !!\n");
 
        if(from_file == 1) {
 
            jpeg_free(data_buf);
 
            data_buf = NULL;
 
        }
 
        return LV_IMG_DECODER_OPEN_FAIL;
 
    }

在完成解压缩操作后,要开始为取走数据做准备,将解压后的图像信息填充至jpeg_info结构中。比如,输出图像宽度jpeg_info.output_width,输出图像高度jpeg_info.output_height,每个像素中的颜色通道数jpeg_info.output_components(比如灰度为1,全彩色为3)等。一般情况下,这些参数是在jpeg_start_decompress执行后才被填充到jpeg_info中的,如果希望在调用jpeg_start_decompress之前就获得这些参数,可以通过调用jpeg_calc_output_dimensions()的方法来实现。

    uint8_t *rgb888_buf = NULL;
 
    uint32_t out_buffer_size = jpeg_info.image_width*jpeg_info.image_height*jpeg_info.num_components;
 
    rgb888_buf = jpeg_malloc(out_buffer_size, 0);
 
    if(rgb888_buf == NULL) {
 
        LOGI("lv_img_decoder_open_jpeg: no enough memory!!\n");
 
        goto err;
 
    }

解压缩的数据是按照行取出的,数据像素按照scanline来存储,scanline是从左到右,从上到下的顺序,每个像素对应的各颜色或灰度通道数据是依次存储,比如一个24-bitRGB真彩色的图像中,一个scanline中的数据存储模式是R,G,B,R,G,B,R,G,B,...,每条scanline是一个JSAMPLE类型的数组,一般来说就是unsigned char,定义于jmorecfg.h中。除了JSAMPLE,IJG还定义了JSAMPROW和JSAMPARRAY,分别表示一行JSAMPLE和一个2D的JSAMPLE数组。

jpeg_info.output_scanline表示当前已经读取的行数,如此即可依次读出图像的所有数据,并填充到缓冲区中。

    while (jpeg_info.output_scanline<jpeg_info.output_height)
 
    {
 
        JSAMPROW out_str  = (JSAMPROW)(rgb888_buf +
 
                     jpeg_info.output_scanline*jpeg_info.image_width*jpeg_info.num_components);
 
        if((jpeg_read_scanlines(&jpeg_info, &out_str, 1) != 1) || (jpeg_err == 1)) {
 
            LOGE("lv_img_decoder_open_jpeg: scan line failed!!\n");
 
            jpeg_free((void *)rgb888_buf);
 
            goto err;
 
        }
 
    }

解压缩完毕调用jpeg_finish_decompress,然后释放jpeg_destroy_decompress

        jpeg_finish_decompress(&jpeg_info);
 
        jpeg_destroy_decompress(&jpeg_info);

开发者支持

如需更多技术支持,可加入钉钉开发者群,或者关注微信公众号。

image.png

更多技术与解决方案介绍,请访问HaaS官方网站https://haas.iot.aliyun.com

相关文章
|
存储 编解码 算法
探索现代图片格式:从GIF到HEIF,优势与适用场景一览
引言 最近在掘金看到很多动图头像,但都失真了,好奇就研究了下前端各种图片格式
257 0
|
存储 XML 编解码
探索现代图片格式:从GIF到HEIF,优势与适用场景一览-2
使用场景: JPEG适用于各种需要高度压缩、广泛兼容性以及不需要透明背景的场景。它特别适用于摄影、照片、艺术品等复杂图像的存储和展示。
417 0
|
数据采集 API Android开发
简单易用的图像解码库介绍-stb_image
说到图像解码库,最容易想起的就是libpng和libjpeg这两个老牌图像解码库了。
1019 0
简单易用的图像解码库介绍-stb_image
|
缓存 iOS开发 MacOS
万能动态滤镜GIF框架想不想要的?
Wintersweet是一款快速让控件播放GIF和添加过滤器的框架。
万能动态滤镜GIF框架想不想要的?
|
小程序 容器
【微信小程序】image组件的4种缩放模式与9种裁剪模式
假设有一个容器(这个容器的宽高就是设置的样式),要将图片放进去。而aspectFit的特点就是保持图片不变形,且容器要“刚好”将这个图片装进去。如果原始图片比容器大,就要被等比例缩小;如果原始图片比容器小,就会被等比例放大。一直放大或缩小到图片的某一条边刚好和容器的一条边重合。
1413 0
|
存储 前端开发 应用服务中间件
动态转换图片格式为webp
动态转换图片格式为webp
动态转换图片格式为webp
Flutter如何将文本与图片混合编辑?(功能扩展篇)
一个优秀的富文本,应该包含优秀的排版算法、丰富的功能和渲染的高性能。在上一篇中,我们实现了可扩展的、基础的富文本编辑器。那么在本文中,让我们对富文本进行更多功能的扩展。
Flutter如何将文本与图片混合编辑?(功能扩展篇)
【图片操作】混合图片
混合图片的方式有很多种,我们先来看看如何通过混合图片的通道来实现图片混合。
152 0
|
存储 编解码 缓存
Hi3516开发笔记(十):Qt从VPSS中获取通道图像数据存储为jpg文件
上一篇已经将himpp套入qt的基础上进行开发。那么qt中拿到frame则是很关键的交互,这是qt与海思可能编解码交叉开发的关键步骤。
Hi3516开发笔记(十):Qt从VPSS中获取通道图像数据存储为jpg文件
|
Web App开发 编解码 移动开发
前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配 (上)
前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
322 0
前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配 (上)
下一篇
无影云桌面