2018-8-10-win10-uwp-如何创建修改保存位图

title	author	date	CreateTime	categories
win10 uwp 如何创建修改保存位图	lindexi	2018-08-10 19:16:50 +0800	2018-05-05 20:23:18 +0800	Win10 UWP

本文告诉大家如何使用 Softwarebitmap 进行创建、修改保存图片。

在 UWP 使用底层的图像渲染就是使用 Softwarebitmap ，这个类提供直接数据修改，可以使用这个类进行软渲染。实际上 Softwarebitmap 和 WriteableBitmap 是差不多的。但是 Softwarebitmap 可以支持 WriteableBitmap 、 Direct3D 和代码修改。通过 Softwarebitmap 可以修改转换不同的像素格式和透明通道，支持低级修改像素。作为一个通用的底层类在很多性能要求比较高的地方用到，如 CapturedFrame、VideoFrame、FaceDetector。下面来告诉大家如何使用。

创建

下面来告诉大家如何读取文件，使用图片数据创建 Softwarebitmap 图片。

首先是需要使用 FileOpenPicker 拿到一张图片，如何读写文件参见：win10 UWP读写文件

因为很简单，下面直接拿到一张 jpg ，当然需要用户点击。下面代码是直接从微软文档复制的，我自己没运行，看起来大家可以直接使用。

FileOpenPicker fileOpenPicker = new FileOpenPicker();
fileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
fileOpenPicker.FileTypeFilter.Add(".jpg");
fileOpenPicker.ViewMode = PickerViewMode.Thumbnail;

var inputFile = await fileOpenPicker.PickSingleFileAsync();

if (inputFile == null)
{
    // The user cancelled the picking operation
    return;
}

因为需要拿到文件内容，需要使用 OpenAsync 方法获得随机访问流。随机访问流就是可以在随机的地方进行读写，和他不相同的是顺序流，也就是只能顺序读写。使用 BitmapDecoder.CreateAsync 创建一个图片解析，用来拿到图片

SoftwareBitmap softwareBitmap;

using (IRandomAccessStream stream = await inputFile.OpenAsync(FileAccessMode.Read))
{
    // Create the decoder from the stream
    BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);

    // Get the SoftwareBitmap representation of the file
    softwareBitmap = await decoder.GetSoftwareBitmapAsync();
}

保存图片

上面和大家说如何读取文件，现在就可以把刚才读取的图片保存。保存需要用户选择保存在哪

          FileSavePicker fileSavePicker = new FileSavePicker();
            fileSavePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
            fileSavePicker.FileTypeChoices.Add("png files", new List<string>() { ".png" });
            fileSavePicker.SuggestedFileName = "image";

            var outputFile = await fileSavePicker.PickSaveFileAsync();

            if (outputFile == null)
            {
                // The user cancelled the picking operation
                return;
            }

使用 OpenAsync 方法打开文件，转换随机写入流写入数据。使用 BitmapEncoder.CreateAsync 创建 BitmapEncoder 。创建的函数第一个参数是 GUID 表示需要哪个格式，可以通过 BitmapEncoder 输入，下面代码就是把刚才读取的 jpg 图片转换为 Png 格式。

           using (var stream = await outputFile.OpenAsync(FileAccessMode.ReadWrite))
            {
                // 格式 png 通过把上面打开的图片转换
                BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);

                encoder.SetSoftwareBitmap(_softwareBitmap);
            }

这个方法就是把 softwareBitmap 转换为 Stream 的方法

如果在保存需要对图片进行编辑，可以使用 BitmapTransform 进行变换，请看代码

                encoder.BitmapTransform.ScaledWidth = 320;
                encoder.BitmapTransform.ScaledHeight = 240;
                // 90度旋转
                encoder.BitmapTransform.Rotation = BitmapRotation.Clockwise90Degrees;
                // 大的图片转换为小的图片，需要使用插值算法，不然会模糊
                encoder.BitmapTransform.InterpolationMode = BitmapInterpolationMode.Fant;
                // 创建新的缩略图
                encoder.IsThumbnailGenerated = true;

因为不是所有的文件格式都支持缩略图，如果使用了创建新的图就需要 catch 不支持异常。

在转换图片需要调用 FlushAsync 保存图片。

                try
                {
                    await encoder.FlushAsync();
                }
                catch (Exception exception)
                {
                    const int WINCODEC_ERR_UNSUPPORTEDOPERATION = unchecked((int) 0x88982F81);

                    switch (exception.HResult)
                    {
                        case WINCODEC_ERR_UNSUPPORTEDOPERATION:
                            // 如果格式不支持，就会出现这个异常，需要禁止创建缩略图，然后继续保存
                            encoder.IsThumbnailGenerated = false;
                            break;
                        default:
                            throw;
                    }
                }

                if (encoder.IsThumbnailGenerated == false)
                {
                    await encoder.FlushAsync();
                }

现在在前台添加两个按钮，一个用于打开文件，另一个用来保存图片

随便选一个 jpg 文件，然后保存，可以看到保存了新的格式

在 UWP 可以使用上面的方法修改图片格式

上面代码只是简单使用，在创建 BitmapEncoder 可以传入 BitmapPropertySet 指定图片质量

      var propertySet = new Windows.Graphics.Imaging.BitmapPropertySet();
                var qualityValue = new Windows.Graphics.Imaging.BitmapTypedValue(
                    1.0, // Maximum quality
                    Windows.Foundation.PropertyType.Single
                );

                propertySet.Add("ImageQuality", qualityValue);

                // 格式 png 通过把上面打开的图片转换
                BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream, propertySet);

其他的值请看 BitmapEncoder options reference

在 Image 控件使用

刚才的代码没有显示打开的图片，如果要把 SoftwareBitmap 在 Image 使用，就需要使用 SoftwareBitmapSource 转换，因为 Image 控件只支持 BGRA8 格式而且需要先计算透明值，在转换打开 SoftwareBitmap 静态函数 Convert 让格式在 Image 控件支持。

先在界面创建一个 Image 控件，然后在后台添加代码显示

      <Image x:Name="MaixallnayMesejas"></Image>

            if (_softwareBitmap.BitmapPixelFormat != BitmapPixelFormat.Bgra8 ||
                _softwareBitmap.BitmapAlphaMode == BitmapAlphaMode.Straight)
            {
                _softwareBitmap = SoftwareBitmap.Convert(_softwareBitmap, BitmapPixelFormat.Bgra8,
                    BitmapAlphaMode.Premultiplied);
            }


            var source = new SoftwareBitmapSource();
            await source.SetBitmapAsync(_softwareBitmap);
            MaixallnayMesejas.Source = source;

尝试运行一下代码就可以看到显示图片在打开文件。

实际上通过 下面代码可以把 SoftwareBitmap 转 ImageBrush 显示

            var imageBrush = new ImageBrush {ImageSource = source};

WriteableBitmap 转换

上面都是读写文件，如果已经使用了 WriteableBitmap 需要把他转换 SoftwareBitmap 可以使用 SoftwareBitmap 的静态函数 SoftwareBitmap.CreateCopyFromBuffer 转换。

SoftwareBitmap outputBitmap = SoftwareBitmap.CreateCopyFromBuffer(
    writeableBitmap.PixelBuffer,
    BitmapPixelFormat.Bgra8,
    writeableBitmap.PixelWidth,
    writeableBitmap.PixelHeight
);

通过读写像素

是不是看到上面的教程感觉这个博客很简单，我就来告诉大家很黑的方法，如果看到这里还没有关闭这个网页，那么现在关闭还是可以，不然我就来和大家说很黑科技的写法。

如果大家直接从 SoftwareBitmap 使用 Resharper 无论怎么点都无法找到读写像素的方法。但是我会告诉大家我自己创建了一个接口，使用这个接口就可以读写。

首先引用using System.Runtime.InteropServices;然后创建接口

    [ComImport]
    [Guid("5B0D3235-4DBA-4D44-865E-8F1D0E4FD04D")]
    [InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
    internal unsafe interface IMemoryBufferByteAccess
    {
        void GetBuffer(out byte* buffer, out uint capacity);
    }

创建这个接口有什么用，先不告诉大家，因为用了不安全，需要在项目属性，生成，可以使用不安全

我来告诉大家如何从代码创建 SoftwareBitmap ，读写像素。

创建一个空白的 SoftwareBitmap 需要设置格式

            var softwareBitmap = new SoftwareBitmap(BitmapPixelFormat.Bgra8, 100, 100, BitmapAlphaMode.Straight);

使用 LockBuffer 可以拿到 buffer ，使用 buffer.CreateReference 可以拿到指针

            using (var buffer = softwareBitmap.LockBuffer(BitmapBufferAccessMode.ReadWrite))
            {
                using (var reference = buffer.CreateReference())
                {
                }
            }

然后就是不安全代码，本文的黑科技就是这个代码

       using (var buffer = softwareBitmap.LockBuffer(BitmapBufferAccessMode.ReadWrite))
            {
                using (var reference = buffer.CreateReference())
                {
                    unsafe
                    {
                        ((IMemoryBufferByteAccess) reference).GetBuffer(out var dataInBytes, out _);               
                    }
                }

把 reference 转换为我自己定义的接口，使用 GetBuffer 拿到数据指针。

这个的原理，本渣在这里不会说。

拿到了 dataInBytes 就是按照 BGRA 的顺序，但是还不知道图片的宽度用了多少个，而且图片如果是分层的，第 n 层是从哪个数据开始。为了知道指针的开始，就使用 BitmapBuffer 的方法

  BitmapPlaneDescription bufferLayout = buffer.GetPlaneDescription(0);

获取图层数量可以使用buffer.GetPlaneCount()，因为第 0 个在这里是有的，所以直接使用

那么图片的宽使用多少个如何拿到，bufferLayout.StartIndex 就是拿到图层开始所在，bufferLayout.Stride 就是一行使用了多少 byte 。所以要访问第 i 行 j 列的像素就可以使用下面的代码

dataInBytes[bufferLayout.StartIndex + bufferLayout.Stride * i + 4 * j + 0] // B

dataInBytes[bufferLayout.StartIndex + bufferLayout.Stride * i + 4 * j + 1] // G

ataInBytes[bufferLayout.StartIndex + bufferLayout.Stride * i + 4 * j + 2] // R

dataInBytes[bufferLayout.StartIndex + bufferLayout.Stride * i + 4 * j + 3] // A

写入的方式就是直接给一个值，读取的方式就是去拿，方法很简单，下面来写一个渐变

      ((IMemoryBufferByteAccess)reference).GetBuffer(out dataInBytes, out capacity);

        // Fill-in the BGRA plane
        BitmapPlaneDescription bufferLayout = buffer.GetPlaneDescription(0);
        for (int i = 0; i < bufferLayout.Height; i++)
        {
            for (int j = 0; j < bufferLayout.Width; j++)
            {

                byte value = (byte)((float)j / bufferLayout.Width * 255);
                dataInBytes[bufferLayout.StartIndex + bufferLayout.Stride * i + 4 * j + 0] = value;
                dataInBytes[bufferLayout.StartIndex + bufferLayout.Stride * i + 4 * j + 1] = value;
                dataInBytes[bufferLayout.StartIndex + bufferLayout.Stride * i + 4 * j + 2] = value;
                dataInBytes[bufferLayout.StartIndex + bufferLayout.Stride * i + 4 * j + 3] = (byte)255;
            }
        }

转换 CanvasBitmap

使用 CanvasBitmap.CreateFromSoftwareBitmap 可以从 SoftwareBitmap 转换为 CanvasBitmap

var canvasBitmap = CanvasBitmap.CreateFromSoftwareBitmap(device, softwareBitmap);

需要注意，如果 SoftwareBitmap 的像素格式比较诡异，那么不一定能创建

sourceBitmap's BitmapPixelFormat	CanvasBitmap's Format
BitmapPixelFormat.Unknown	unsupported
BitmapPixelFormat.Rgba16	DirectXPixelFormat.R16G16B16A16UIntNormalized
BitmapPixelFormat.Rgba8	DirectXPixelFormat.R8G8B8A8UIntNormalized
BitmapPixelFormat.Gray16	unsupported
BitmapPixelFormat.Gray8	DirectXPixelFormat.A8UIntNormalized
BitmapPixelFormat.Bgra8	DirectXPixelFormat.B8G8R8A8UIntNormalized
BitmapPixelFormat.Nv12	unsupported
BitmapPixelFormat.Yuy2	unsupported

参见：CanvasBitmap.CreateFromSoftwareBitmap Method

Create, edit, and save bitmap images - UWP app developer