电子签章处理文件和打印基于ABP框架的前端项目Vue&Element _ABP框架

在一些内部OA或者流转的文件，或者给一些客户的报价文件、合同，或者一些医院出示的给保险机构的病历资料等，有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章，本篇随笔介绍基于Vue&Element的前端项目采用第三方组件
vue-drag-resize和图片转换Base64的方式实现图片印章的盖章处理。
1、图片转换为Base64处理图片转换为Base64编码可以通过在线工具的转换方式实现图片转Base64编码，网上很多在线的处理，百度一下即可。
如：
https://c.runoob.com/front-end/59/ 或者 https://tool.chinaz.com/tools/imgtobase 试过都可以，非常方便。
如果我们喜欢通过C#代码进行图片的转换也可以使用自己封装的函数实现处理，如下所示。

文章插图

Base64 在css中的使用
.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }Base64 在html中的使用
<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />我们使用C#代码转换的处理代码如下所示。

private void btnBase64_Click(object sender, EventArgs e){var base64 = ImageHelper.ImageToBase64Str(this.pictureBox1.Image);if(chkData.Checked){base64 = "data:image/jpeg;base64," + base64;}this.txtBase64.Text = base64;}

而其中调用是通过我们公用类库中的图片辅助类进行，详细转换代码如下所示。

/// <summary>/// 从文件中转换图片对象到Base64编码/// </summary>/// <param name="imageFilePath">图片文件路径</param>/// <returns></returns>public static string ImageToBase64Str(string imageFilePath){Image image = Image.FromFile(imageFilePath);using (MemoryStream ms = new MemoryStream()){image.Save(ms, image.RawFormat);//ImageFormat.Jpegbyte[] imageBytes = ms.GetBuffer();string imgBase64Str = Convert.ToBase64String(imageBytes);//释放资源，让别的使用image.Dispose();return imgBase64Str;}}/// <summary>/// 转换图片对象到Base64编码/// </summary>/// <param name="image">Image图片对象</param>/// <returns></returns>public static string ImageToBase64Str(Image image){using (MemoryStream ms = new MemoryStream()){image.Save(ms, image.RawFormat);//ImageFormat.Jpegbyte[] imageBytes = ms.GetBuffer();string imgBase64Str = Convert.ToBase64String(imageBytes);return imgBase64Str;}}

这样，我们在前端Vue的项目中，就可以赋值这段图片Base64代码到HTML文件中就可以了，如下是前端Vue项目代码所示（缩减了部分Base64编码）。

文章插图

这样我们就可以在页面中放置一个Base64编码的图片在页面中了。

文章插图

2、使用vue-drag-resize组件实现印章图片的拖动常规的图片，放置在页面中，位置是固定的，如果我们需要拖动印章，那么就需要引入可拖动面板的Vue组件vue-drag-resize来处理它了。
vue-drag-resize是Github上的一个开源组件，地址是：
https://github.com/kirillmurashov/vue-drag-resize
这个组件的使用和其他组件的使用方式一样，非常方便。
import Vue from 'vue'import VueDragResize from 'vue-drag-resize'Vue.component('vue-drag-resize', VueDragResize)在组件或者页面中使用的代码如下所示。
import VueDragResize from 'vue-drag-resize'export default {components: { VueDragResize },它的HTML代码如下所示。

<template><div id="App"><VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize"><h3>Hello World!</h3><p>{{ top }} х {{ left }} </p><p>{{ width }} х {{ height }}</p></VueDragResize></div></template>

为了把印章图片可以拖动，我们在HTML中放置印章图片包含在这个组件面板中。