C#结合JS解决Word添加无效位图导致进程停滞的问题
目录
故障现象
解决步骤
开发运行环境
关键代码
呈现图片到客户端
重绘图像
后端处理
小结
故障现象
最近在使用Word导出简历的时候，发现在导出某些简历数据的时候，服务器端 WORD 进程停滞，页面无响应。最后发现问题发生在使用 Word COM 方法 Word.InlineShape pic = WordApp.Selection.InlineShapes.AddPicture(filename,Type.Missing, true, Type.Missing); 时导致。在使用添加图片方法时，我们预生成了一个图片，该图片数据以二进制数据保存在数据表中，Web 端可以通过 Response.BinaryWrite 方法呈现到 Image 控件上，但生成图片文件的时候，无法打开，提示无效的位图文件，如下图所示：
解决步骤
（1）将数据表中的二进制数据读出，将写入到 Image 控件上进行图像呈现。
（2）在客户端通过 JS 创建画布，将图像数据绘制到画布上，进行重绘操作。
（3）通过画布生成 Base64 编码数据，保存在临时文本控件中。
（4）服务端将 Base64 方法重新生成正常位图文件，再使用WordApp.Selection.InlineShapes.AddPicture方法实现 Word 正常添加图片。
开发运行环境
操作系统： Windows Server 2019 DataCenter
Word 版：Microsoft Office Word 2016
.net版本： .netFramework4.7.2 或以上
开发工具：VS2019 C#
关键代码
呈现图片到客户端
假设 Web 页放置 ID 为 Image1 的Image控件，前端示例代码如下：
test.aspx 后端输出数据文件，示例代码如下：
string _id="1001";
string _sql = "select imgdata from photos where id=@id ";
ArrayList para = new ArrayList();
para.Add(new SqlParameter("id", _id));
object rv=GetDataSet(_sql,paras);
DataSet ds = (DataSet)rv;
Byte[] _img= (Byte[])ds.Tables[0].Rows[0][0];
Response.ContentType = "image/*";//
Response.BinaryWrite(_img);
该代码模拟从数据表提取二进制字段（imgdata）数据通过 Response.BinaryWrite 方法写入并呈现数据。如何获取数据集可参阅我的文章 《C# 利用IDbDataAdapter / IDataReader 实现通用数据集获取》
重绘图像
前端页面布局两个元素，一个 ID 为 myCanvas 的画布元素，一个用于存储 Base64 数据的 ID 为 ds 的文本框控件。
引用代码如下：
以下代码通过 canvas 元素重绘图像：
var img = document.getElementById("Image1");
img.onload = function () {
var canvas = document.getElementById("myCanvas")
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas1.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var image = canvas.toDataURL("image/png");
document.getElementById("ds").value = image;
}
引用 Image1对象，将画布宽高设置为图像的宽高，通过 drawImage 方法进行重绘操作，最后再通过 canvas.toDataURL 方法将 Base64 数据写入到 ds 临时文本框控件中。
后端处理
通过 Base64StringToImage 方法将 Base64 数据转化为图片文件，方法代码如下：
public bool Base64StringToImage(string strbase64, string outputFilename)
{
byte[] arr = Convert.FromBase64String(strbase64);
MemoryStream ms = new MemoryStream(arr);
System.Drawing.Image img = System.Drawing.Image.FromStream(ms);
img.Save(outputFilename);
img.Dispose();
if (File.Exists(outputFilename))
{
return true;
}
return false;
}
以下代码实现最终生成可用的位图文件：
string filename="d:\\test.png";
string base64Data = ds.Text.Trim().Replace("data:image/png;base64,", "");
Base64StringToImage(base64Data, filename);
关键部分需要替换掉临时数据里的 “data:image/png;base64,” 文本，否则无法正常生成位图文件。
小结
至此生成简历数据正常，这是一种变通的做法，关于 WORD 的一些更多操作可参阅我的文章：
《C# 读取二维数组集合输出到Word预设表格》
《C# 操作 Word 全域查找且替换(含图片对象)》
画布绘制还可参阅我的文章：
《C# 结合JavaScript实现手写板签名并上传到服务器》
感谢您的阅读，希望本文能够对您有所帮助。
