UWP图片编辑器(涂鸦、裁剪、合成)

简介: 原文:UWP图片编辑器(涂鸦、裁剪、合成) 一、编辑器简介 写这个控件之前总想找一找开源的,可以偷下懒省点事。可是各种地方都搜遍了也没有找到。 于是,那就做第一个吃螃蟹的人吧! 控件主要有三个功能:涂鸦、裁剪、合成。
原文: UWP图片编辑器(涂鸦、裁剪、合成)

一、编辑器简介

写这个控件之前总想找一找开源的,可以偷下懒省点事。可是各种地方都搜遍了也没有找到。

于是,那就做第一个吃螃蟹的人吧!

控件主要有三个功能:涂鸦、裁剪、合成。

涂鸦:主要是用到了InkToolbar和InkCanvas。

裁剪:这个用到的比较复杂,源码会公布出来。

合成:将涂鸦图层按比例缩放到原图大小,然后两个图层进行合成。

本文GitHub地址

二、涂鸦功能实现方法

这里为了省事用了一个别人写好的控件,主要是切换画笔、颜色方便。其实可以自己单独写控件的。

能用现成的就用现成的,少写好多行代码了。

Inktoolbar下载地址:

https://visualstudiogallery.msdn.microsoft.com/58194dfe-df44-4c4e-893a-1eca40675269

初始化Ink相关控件:

                    
<InkCanvas Name="ink_canvas">
<ink:InkToolbar x:Name="inktoolbar"  ButtonHeight="60" ButtonWidth="60" ButtonBackground="Transparent" >
ink_canvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch | CoreInputDeviceTypes.Pen;
inktoolbar.TargetInkCanvas = this.ink_canvas;


获取涂鸦方法:

1、从InkCanvas中获取:

这个获取的就是屏幕渲染出来的图片,也就是说图片基本都是被缩放过的。

优点:速度快。

缺点:图片是被放缩成控件大小的,不是原图的大小。比如原图是2880*1600的图,涂鸦过后取出来的图片就变成288*160的大小了。

CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)ink_canvas.ActualWidth, (int)ink_canvas.ActualHeight, 96);
renderTarget.SetPixelBytes(new byte[(int)ink_canvas.ActualWidth * 4 * (int)ink_canvas.ActualHeight]);

using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
    await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Png, 1f);
}

2、图层合成

先获取ink图层,缩放至原图大小。然后将Ink图层和原图图层合并。缩放和合并算法的源码会在文章末尾。

优点:图片大小不改变,相当于是在原图上涂鸦。

缺点:计算复杂,比较耗时。

CanvasDevice device = CanvasDevice.GetSharedDevice();
CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)ink_canvas.ActualWidth, (int)ink_canvas.ActualHeight, 96);
renderTarget.SetPixelBytes(new byte[(int)ink_canvas.ActualWidth * 4 * (int)ink_canvas.ActualHeight]);
using (var ds = renderTarget.CreateDrawingSession())
{
    IReadOnlyList<InkStroke> inklist = ink_canvas.InkPresenter.StrokeContainer.GetStrokes();

    Debug.WriteLine("Ink_Strokes Count:  " + inklist.Count);
   ds.DrawInk(inklist);
}
var inkpixel = renderTarget.GetPixelBytes();
WriteableBitmap bmp = new WriteableBitmap((int)ink_canvas.ActualWidth, (int)ink_canvas.ActualHeight);
Stream s = bmp.PixelBuffer.AsStream();
s.Seek(0, SeekOrigin.Begin);
s.Write(inkpixel, 0, (int)ink_canvas.ActualWidth * 4 * (int)ink_canvas.ActualHeight);

WriteableBitmap ink_wb = await ImageProcessing.ResizeByDecoderAsync(bmp, sourceImage.PixelWidth, sourceImage.PixelHeight, true);

WriteableBitmap combine_wb = await ImageProcessing.CombineAsync(sourceImage, ink_wb);

 

三、裁剪功能实现方法

在WPF中已经有很多前人写过的模板了,这里不需要做太多修改就可以使用。代码会在文章末尾给出

但是有一个问题在UWP中会引起卡顿现象。

剪裁的时候为了方便用户对齐,会将裁剪区域分成九宫格。

这时候想到了画四个矩形,但是这样子会卡顿,非常卡顿、非常卡顿、非常卡顿

 

<Rectangle x:Name="horizontalLine" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLineCanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
<Rectangle x:Name="verticalLine" Canvas.Left="{Binding VerticalLineCanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
<Rectangle x:Name="horizontalLine1" Canvas.Left="{Binding SelectedRect.Left}" Canvas.Top="{Binding HorizontalLine1CanvasTop}" Height="1" Width="{Binding SelectedRect.Width}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>
<Rectangle x:Name="verticalLine1" Canvas.Left="{Binding VerticalLine1CanvasLeft}" Canvas.Top="{Binding SelectedRect.Top}" Width="1" Height="{Binding SelectedRect.Height}" Fill="{ThemeResource ApplicationForegroundThemeBrush}"/>

解决方案是画Path,由于绘图机制的原因,这样子就不会有卡顿现象,给用户如丝般润滑的感觉。

<Path x:Name="horizontalLine" Fill="{ThemeResource ApplicationForegroundThemeBrush}" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="0.5">
  <Path.Data>
      <RectangleGeometry Rect="{Binding HorizontalLine1}"/>
  </Path.Data>
</Path>
<Path x:Name="horizontalLine1" Fill="{ThemeResource ApplicationForegroundThemeBrush}" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="0.5">
  <Path.Data>
    <RectangleGeometry Rect="{Binding HorizontalLine2}"/>
  </Path.Data>
</Path>
<Path x:Name="verticalLine" Fill="{ThemeResource ApplicationForegroundThemeBrush}" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="0.5">
  <Path.Data>
    <RectangleGeometry Rect="{Binding VerticalLine1}"/>
  </Path.Data>
</Path>
<Path x:Name="verticalLine1" Fill="{ThemeResource ApplicationForegroundThemeBrush}" Stroke="{ThemeResource ApplicationForegroundThemeBrush}" StrokeThickness="0.5">
  <Path.Data>
    <RectangleGeometry Rect="{Binding VerticalLine2}"/>
  </Path.Data>
</Path>

 

四、图片合成

先对涂鸦图层进行缩放,这里可以用Fant、双三次样条插值等算法。然后根据涂鸦图层和原图层通透度进行合成。

 图层合并的方法不一定正确,感觉上是这样的:上层的通透度如果是0.7。那么合成后的像素就是 :上层像素值 x 0.7 + 下层像素值 x (1-0.7) 。如果有多层图层的话,从上至下依次进行合成。

      public static byte[] Combine(byte[] basesrc, byte[] floatsrc,int width, int height)
        {
            byte[] retsrc = new byte[height * 4 * width];

            for (int x = 0; x < width; ++x)
            {
                for (int y = 0; y < height; ++y)
                {
                    int[] color_float = getBGR(floatsrc, x, y, width);
                    int alpha_float = GAP(floatsrc, x, y, width);

                    int[] color_base = getBGR(basesrc, x, y, width);
                    int alpha_base = GAP(basesrc, x, y, width);

                    int R=0, G=0, B=0, A=0;

                    if (alpha_base != 255)
                    {
                        color_base[0] = color_base[1] = color_base[2] = alpha_base = 255;
                        color_base[0] = (255 * (255 - alpha_float) + color_float[0] * alpha_base) / 255;
                        color_base[1] = (255 * (255 - alpha_float) + color_float[1] * alpha_base) / 255;
                        color_base[2] = (255 * (255 - alpha_float) + color_float[2] * alpha_base) / 255;
                        alpha_base = 255;
                    }

                    if (color_float[0] == 0 && color_float[1] == 0 && color_float[2] == 0 && alpha_float == 0)
                    {
                        B = color_base[0];
                        G = color_base[1];
                        R = color_base[2];
                        A = alpha_base;
                    }
                    else
                    {
                        B = (color_base[0] * (255 - alpha_float) + color_float[0] * alpha_float) / 255;
                        G = (color_base[1] * (255 - alpha_float) + color_float[1] * alpha_float) / 255;
                        R = (color_base[2] * (255 - alpha_float) + color_float[2] * alpha_float) / 255;
                        A = alpha_float+(255-alpha_float)*(alpha_base/255);
                        A = A > 255 ? 255 : A;
                    }
                    
                    putpixel(retsrc, x, y, width, R, G, B, A);
                }
            }

            return retsrc;
        }

 

GtiHub地址:https://github.com/LeoLeeCN/UWP_Toolkit

目录
相关文章
|
1月前
|
JavaScript 数据可视化
基于fabric.js的图片编辑器, 画布背景实现原理
基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析
基于fabric.js的图片编辑器, 画布背景实现原理
|
6月前
|
Web App开发 数据采集 人工智能
|
10月前
|
存储 JSON JavaScript
fabric.js开发图片编辑器可以实现哪些功能?多图
使用fabric.js开发了图片编辑器,用文字加动图的形式直观的分享出来,帮助做功能参考,项目已开源。
fabric.js开发图片编辑器可以实现哪些功能?多图
|
JSON JavaScript 前端开发
fabric.js开发图片编辑器的细节实现
如何用vue和fabric.js快速开发一款编辑器,并利用fabric.js的api提供标准编辑器的能力。
fabric.js开发图片编辑器的细节实现
|
前端开发
掘金Markdown编辑器中的图片怎么居中?
掘金Markdown编辑器中的图片怎么居中?
393 0
|
存储 JSON 缓存
从零开发一款图片编辑器Mitu
我们知道,为了提高企业研发效能和对客户需求的快速响应,现在很多企业都在着手数字化转型,不仅仅是大厂(阿里,字节,腾讯,百度)在做低代码可视化这一块,很多中小企业也在做,拥有可视化低代码相关技术背景的程序员也越来受重视。
508 0
|
Web App开发 前端开发 JavaScript
好程序员web前端培训分享用CSS和JS打造一个简单的图片编辑器
  好程序员web前端培训分享用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节。
1322 0
|
数据采集 Web App开发 Python
欢迎使用CSDN-markdown编辑器Python爬虫初接触,学会爬虫不抓美女图片干啥!
学习编程语言是很枯燥的,尤其是对一个编程零基础的人来说,更为枯燥!所以我们要从枯燥的学习中找点乐趣和动力!比如,抓点小姐姐的图片 我们的目标选择唯一图库,url自己去找【人工呲牙笑】 这个网站没有反爬,特别好爬,打开主页后,找到美女图片分类 上面分类没有这个分类,自己想办法进入哦。
1546 0
CKEditor+SWFUpload实现功能较为强大的编辑器(三)---后台接收图片流程
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq1010885678/article/details/37519271 在...
881 0
让博客园的编辑器自动上传外链图片
让博客园的编辑器自动上传外链图片   我经常翻译国外的文章,遇到这么个需求.如果要翻译的文章中包含了图片,那么复制到博客园的时候图片肯定是引用原网站的了.如果原网站是个人博客(任何时候域名都可能失效),或者需要通过代理软件才能访问,或者是虽然能访问,但速度很慢,这些情况下,我们就需要把外...
1009 0

相关产品