基于 Compose Desktop 实现的图像编辑器之各种形状的裁剪、图像取色、使用查找表实现的滤镜

一. 图像编辑器 Monica

Monica 是一款跨平台的桌面图像编辑软件,使用 Kotlin Compose Desktop 进行开发。

它基于 mvvm 架构,由于应用层都是由 Kotlin 编写的,所以使用 koin 作为依赖注入框架。

Monica github 地址:github.com/fengzhizi71...

Monica 目前还处于开发阶段,当前版本的主要功能包括:

  • 支持加载本地图片、网络图片。
  • 支持对图片进行局部模糊、打马赛克。
  • 支持对图片进行涂鸦,并保存涂鸦的结果。
  • 支持图片取色功能
  • 支持图像的翻转、旋转、缩放
  • 支持各种形状的裁剪,并保存裁剪的结果。
  • 调整图片的饱和度、色相、亮度。
  • 提供 20 多款滤镜,大多数滤镜可以单独调整参数。
  • 保存修改的图像。

二. 多种形状的裁剪

在该系列上一篇文章中,曾介绍过 Monica 的裁剪功能。现在 Monica 可以通过设置裁剪属性支持多种形式的裁剪。

下面,我们以正六边形为裁剪框来裁剪图像。

在主界面显示截取之后的图像。

接下来,还可以以爱心为裁剪框来裁剪图像。

三. 图像取色

在 Monica 的基础功能里,有一个比较有意思的功能,对图像取色。

这个功能通过点击图像中的位置,获取颜色相关的信息,包括 HEX 颜色代码值、RGB 值、 HSL 值和 HSV 值。

四. 基于查找表实现的色彩滤镜

在计算机科学中,查找表L ooku p Table)是用简单的查询操作替换运行时计算的数组或者关联数组这样的数据结构。由于从内存中提取数值经常要比复杂的计算速度快很多,所以这样得到的速度提升是很显著的。

在图像处理中,查找表将索引号与输出值建立联系。查找表是一种常用的图像处理方法,用于对图像进行像素级别的颜色映射或图像增强操作。LUT 查找表可以实现快速、高效的颜色转换和像素操作,尤其在处理大量像素的情况下具有优势。

Monica 参考了 OpenCV 中 applyColorMap() 函数,通过 LUT 在给定的图像上应用色彩映射。

kotlin 复制代码
const val AUTUMN_STYLE: Int = 0
const val BONE_STYLE = 1
const val COOL_STYLE = 2
const val HOT_STYLE = 3
const val HSV_STYLE = 4
const val JET_STYLE = 5
const val OCEAN_STYLE = 6
const val PINK_STYLE = 7
const val RAINBOW_STYLE = 8
const val SPRING_STYLE = 9
const val SUMMER_STYLE = 10
const val WINTER_STYLE = 11

fun getColorFilterLUT(style: Int): Array<IntArray> {

    return when (style) {
        AUTUMN_STYLE  -> AutumnLUT.AUTUMN_LUT
        BONE_STYLE    -> BoneLUT.BONE_LUT
        COOL_STYLE    -> CoolLUT.COOL_LUT
        HOT_STYLE     -> HotLUT.HOT_LUT
        HSV_STYLE     -> HsvLUT.HSV_LUT
        JET_STYLE     -> JetLUT.JET_LUT
        OCEAN_STYLE   -> OceanLUT.OCEAN_LUT
        PINK_STYLE    -> PinkLUT.PINK_LUT
        RAINBOW_STYLE -> RainbowLUT.RAINBOW_LUT
        SPRING_STYLE  -> SpringLUT.SPRING_LUT
        SUMMER_STYLE  -> SummerLUT.SUMMER_LUT
        WINTER_STYLE  -> WinterLUT.WINTER_LUT
        else          -> AutumnLUT.AUTUMN_LUT
    }
}

下面的 ColorFilter 滤镜,实现了 12 种风格的色彩映射。

kotlin 复制代码
class ColorFilter(val style: Int = 0) : ColorProcessorFilter() {

    private fun getStyleLUT(style: Int): Array<IntArray> = getColorFilterLUT(style)

    override fun doColorProcessor(dstImage: BufferedImage): BufferedImage {
        var tr = 0
        var tg = 0
        var tb = 0
        val lut = getStyleLUT(style)
        val size: Int = R.size
        for (i in 0 until size) {
            tr = R[i].toInt() and 0xff
            tg = G[i].toInt() and 0xff
            tb = B[i].toInt() and 0xff
            R[i] = lut[tr][0].toByte()
            G[i] = lut[tg][1].toByte()
            B[i] = lut[tb][2].toByte()
        }

        return toBufferedImage(dstImage)
    }
}

五. 总结

Monica 目前到了 0.2.3 版本,后期的重点是增加优化部分算法、提高效率,增加用户和软件的交互,尝试引入一些深度学习的算法等等。然后,接下来会考虑提供各个平台的安装包。

Monica github 地址:github.com/fengzhizi71...

该系列的相关文章:

图像编辑器 Monica 之图像涂鸦、裁剪、有趣的滤镜

使用 Kotlin Compose Desktop 开发的图像编辑器

相关推荐
狂野小青年7 分钟前
npm 报错 gyp verb `which` failed Error: not found: python2 解决方案
前端·npm·node.js
鲁鲁51711 分钟前
Windows 环境下安装 Node 和 npm
前端·npm·node.js
跑调却靠谱29 分钟前
elementUI调整滚动条高度后与固定列冲突问题解决
前端·vue.js·elementui
呵呵哒( ̄▽ ̄)"1 小时前
React - 编写选择礼物组件
前端·javascript·react.js
Coding的叶子1 小时前
React Flow 简介:构建交互式流程图的最佳工具
前端·react.js·流程图·fgai·react agent
强盛小灵通专卖员3 小时前
分类分割详细指标说明
人工智能·深度学习·算法·机器学习
apcipot_rain6 小时前
【应用密码学】实验五 公钥密码2——ECC
前端·数据库·python
ShallowLin6 小时前
vue3学习——组合式 API:生命周期钩子
前端·javascript·vue.js
Nejosi_念旧6 小时前
Vue API 、element-plus自动导入插件
前端·javascript·vue.js
互联网搬砖老肖6 小时前
Web 架构之攻击应急方案
前端·架构