专栏名称: OpenCV学堂
一个致力于计算机视觉OpenCV原创技术传播的公众号!OpenCV计算机视觉与tensorflow深度学习相关算法原创文章分享、函数使用技巧、源码分析与讨论、,计算机视觉前沿技术介绍,技术专家经验分享,人才交流,学习交流。
目录
相关文章推荐
木木说卡  ·  农行这张卡,堪称“印钞机”啊! ·  昨天  
老子道德经  ·  开心的良方(送给所有人) ·  2 天前  
老子道德经  ·  开心的良方(送给所有人) ·  2 天前  
51好读  ›  专栏  ›  OpenCV学堂

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

OpenCV学堂  · 公众号  ·  · 2024-05-30 21:25

正文

一. 图像编辑器 Monica

Monica 是一款跨平台的桌面图像编辑器,使用 Kotlin Compose Desktop 进行开发基于 mvvm 架构,使用 koin 作为依赖注入的框架。

Monica 开发的背景和初衷可以看 使用 Kotlin Compose Desktop 开发的图像编辑器

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

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

二. 图像涂鸦

涂鸦是 Monica 的基础功能,就是对图像进行随意涂画。

点击上图带提示的按钮,就可以进入涂鸦界面,对图像进行随意的涂鸦。

由于是桌面软件,画笔由鼠标进行控制。画笔默认是黑色的,可以随着鼠标的移动而进行绘制曲线。

Monica 支持选择画笔的颜色。

以及选择画笔的粗细。

涂鸦完之后,记得保存图片,这样回到主界面之后才真正的保存结果了。

涂鸦的效果主要是基于 Canvas 来绘制 Path 实现的。难点在于手势的事件处理和 Path 的绘制,以及将最终的结果保存到 bitmap 。

特别是将 Canvas 的结果保存在网上的资料比较少,所以贴了出来:

    fun saveCanvasToBitmap(density:Density, paths: List<Pair<Path, PathProperties>>, image: ImageBitmap, state:ApplicationState) {

        val bitmapWidth = image.width
        val bitmapHeight = image.height

        val drawScope = CanvasDrawScope()
        val size = Size(bitmapWidth.toFloat(), bitmapHeight.toFloat())
        val canvas = Canvas(image)

        drawScope.draw(
            density = density,
            layoutDirection = LayoutDirection.Ltr,
            canvas = canvas,
            size = size,
        ) {
            state.isDoodle = false
            state.togglePreviewWindow(false)

            paths.forEach {

                val path = it.first
                val property = it.second

                drawPath(
                    color = property.color,
                    path = path,
                    style = Stroke(
                        width = property.strokeWidth,
                        cap = property.strokeCap,
                        join = property.strokeJoin
                    )
                )
            }
        }

        state.addQueue(state.currentImage!!)
        state.currentImage = image.toAwtImage()
    }

三. 图像裁剪

点击带提示的裁剪按钮

可以进入图像裁剪的界面

用户可以基于九宫格的选框,对图像进行裁剪。

裁剪完之后,会在主界面显示截取之后的图像。

图像裁剪也是大量基于 Canvas 的操作。

四. 有趣的滤镜

当前版本新增了一些滤镜,选择2款有意思的介绍。

一款是生成铅笔画的效果:

另一款是生成油画的效果:







请到「今天看啥」查看全文