夫天地者,万物之逆旅;光阴者,百代之过客。而浮生若梦,为欢几何?
基于H5 Canvas的文档在线签批最佳实践(付源码)

原理剖析

文档在线签批(批注)的实现原理是先将文档(word、pdf、ppt等)转换为图片,其次借助H5 Canvas技术、CSS定位、Javascript对图片进行批注,然后将图片和批注内容(Canvas)和并为一张图片,最后再将图片转换为文档的过程。

前提是要先将文档转换成图片,并不是直接对文档进行批注,这点很重要。如果此业务不符合你的需求,请移步。

废话不多说,上图,先来看演示Demo:



批注功能大概囊括了:手写批注(鼠标)、文字批注、颜色和画笔粗细、批注区域缩放(支持快捷键)和拖拽(支持快捷键)、橡皮擦、画矩形、圆、箭头等功能。因为时间关系,右侧涉及到形状的功能完成的不是很完美,有瑕疵,感兴趣的博友可以自己完善。

文档转图片

笔者的项目需求是需要对PDF进行在线签批,上面签批原理中讲到,需要对文档进行预转换成图片才行,笔者这里对PDF转图片使用的是:Ghostscript 。
Ghostscript是一套建基于Adobe、PostScript及可移植文档格式(PDF)的页面描述语言等而编译成的免费软件,官网地址:https://www.ghostscript.com/ ,网上有不少这方面的使用教程,这里就不做过多介绍了,源码中有代码供参考。
关于C#下PDF转图片的解决方案有很多,可以参考这篇文章http://blog.csdn.net/shi0090/article/details/7262199。

如果是需要对word、ppt等Office文档进行在线签批可以使用Office COM组件或其他第三方组件将文件转换为图片。

Ghostscript 客户端下载地址:https://ghostscript.com/download/

图片转文档

用户在线批注后会对批注内容和图片合并生成一个个的新图片,我们后台需要把这些图片保存到一个新文档文件中,这样用户下载后的文件就是批注后的。笔者项目中需求为对PDF批注,所以最后用户下载的也是PDF。

C#下图片转PDF的第三方库很多,笔者使用的是itextsharp,下面贴一断核心转换代码:

Rectangle rec = new Rectangle(PageSize.A4);//
            Document doc = new Document(rec);
            var fs = new System.IO.FileStream(AppDomain.CurrentDomain.BaseDirectory+ @"\123.pdf", System.IO.FileMode.OpenOrCreate);
            var write = PdfWriter.GetInstance(doc, fs);
            doc.Open();
            var imgDirectory = AppDomain.CurrentDomain.BaseDirectory+"\\img";
            foreach (var item in System.IO.Directory.GetFiles(imgDirectory))
            {
                Image img = iTextSharp.text.Image.GetInstance(item);
                if (img.Height > iTextSharp.text.PageSize.A4.Height)
                {
                    img.ScaleToFit(iTextSharp.text.PageSize.A4.Width, iTextSharp.text.PageSize.A4.Height);
                }
                else if (img.Width > iTextSharp.text.PageSize.A4.Width)
                {
                    img.ScaleToFit(iTextSharp.text.PageSize.A4.Width, iTextSharp.text.PageSize.A4.Height);
                }
                img.Alignment = iTextSharp.text.Image.ALIGN_MIDDLE;
                doc.Add(img);
            }
            doc.Close();
            doc.Dispose();


前端渲染

前端渲染主要就是图片预览、Canvas画布的使用,代码比较多,就不贴了,下载源码自己看吧。

源码地址:   https://github.com/itwmike/documentpostil

在线演示:   https://www.limitcode.com/public/demo/postil/views/postil.html

作者:暗夜余晖

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

2

支持

0

反对

posted @2018-1-14  拜读(2563)

评论列表

评论内容:



喜欢请打赏

支付宝 微信

请放心支付