winform图片base64编码,然后通过js显示在网页前端

需求描述:

浏览器中的网页在调用本地客户端程序进行身份证读卡后，将读卡获取的图片发送至浏览器页面中，然后显示读到的身份证照片。

过程描述

1. 浏览器通过注册表协议打开本地程序，并发送读取身份证的业务请求（之前已经实现，不在本次总结范围内）；
2. 客户端进行身份证读卡获取身份证信息（包括照片）；
3. 将照片进行base64编码，并合并其它信息转成json格式通过http请求发送至系统的后端（之前已经实现，不在本次总结范围内）；
4. 系统后端通过websocket的方式将客户端发送的身份证信息通知给浏览器页面；
5. 浏览器页面获取websocket发来的身份证信息（json格式），将其中的各项信息显示到页面中（包括照片）。

照片传输技术拆解

1. 首先winform客户端需要将读卡器读出的bmp格式图片转成png(因为bmp格式web前端不支持直接显示此格式，并且文件极大实测100k的身份证照片在转为png后仅为3k)，然后根据png再转为byte[]，因为前台在展示时采用<img src='data:image/png;base64, xxx'>方式进行显示，编码方式如下所示，并不是直接转码，感觉绕了一点路，但是最终实现目的：

// c# 代码

Image newImage;
// 获取读卡后本地bmp格式的照片信息
using (FileStream fileStream = new FileStream(Application.StartupPath + "\\zp.bmp", FileMode.Open, FileAccess.Read))
{
    Bitmap bmp = new Bitmap(fileStream);
    // 得到原图
    Image image = bmp;
    // 创建指定大小的图
    newImage = image.GetThumbnailImage(bmp.Width, bmp.Height, null, new IntPtr());
    Graphics g = Graphics.FromImage(newImage);
    //将原图画到指定的图上
    g.DrawImage(newImage, 0, 0, newImage.Width, newImage.Height);
    g.Dispose();
    // 转码为png格式，并保存在本地
    newImage.Save(Application.StartupPath + "\\zp.png", ImageFormat.Jpeg);
}

// 读取png格式的图片，然后转为byte[]格式
using (FileStream stream = new FileStream(Application.StartupPath + "\\zp.png", FileMode.Open, FileAccess.Read))
{
    int byteLength = (int)stream.Length;
    byte[] photoBytes = new byte[byteLength];
    stream.Read(photoBytes, 0, byteLength);
    idCardInfo.Photo = photoBytes;
}

2. 然后再将byte[]格式的图片转码为base64：

    // c# 代码
    /// <summary>
    /// 身份证信息
    /// </summary>
    public struct IdCardInfo
    {
        [JsonProperty(PropertyName = "id")]
        public string Id;

        [JsonProperty(PropertyName = "name")]
        public string Name;

        [JsonProperty(PropertyName = "birthday")]
        [JsonConverter(typeof(SecondEpochConverter))]
        public DateTime BirthDate;
        // ...略 其它身份证信息
        [JsonProperty(PropertyName = "photo")]
        [JsonConverter(typeof(ByteArrayToStringConverter))]
        public byte[] Photo;
    }

    using Newtonsoft.Json;
    using System;
    /// <summary>
    /// byte[]转base64转码器
    /// </summary>
    class ByteArrayToStringConverter : JsonConverter
    {
        public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
        {
            byte[] b = (byte[])value;
            writer.WriteRawValue("\"" + Convert.ToBase64String(b) + "\"");
        }

        public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer)
        {
            return reader.Value;
        }

        public override bool CanConvert(Type objectType)
        {
            if (objectType == new byte[0].GetType())
            {
                return true;
            }
            return false;
        }
    }

3. 再通过JSON.NET将其转换为json格式的数据返回至前端：

// c# 代码
notice.RouteParams = JsonConvert.SerializeObject(_idCardInfo);

4. web前端将得到的base64编码的图片通过<img>标签展示到页面中（MVVM框架，双向绑定src）：

// javascript 代码
// params.photo即客户端传过来的base64编码的photo
this.imageUrl = 'data:image/png;base64,' + params.photo;

// vue模板代码
<img v-if="imageUrl" :src="imageUrl">