把HTML的样式布局生成图片

开发工具与关键技术：VS  C#
撰写时间：2019年07月06日

把HTML的样式布局生成图片的时候，需要用到一个html2canvas插件。所以需要下载这个插件，把它放到需要的项目里再进行引入就可以了。
生成图片：
1、因为电脑的分辨率不一样，所以生成图片的时候需要给这张图片设置宽度。

var width = $(".txtBox").width();
                $("#modelImage .modal-dialog").width(width);

2、然后再调用html2canvas里面的一个方法，获取生成图片的元素。
在这里要注意一下,如果获取的是body，那么会把整个页面生成一张图片。

html2canvas($("body")

所以你所需要哪一部分生成图片，就获取包裹住HTML那个div的元素即可。

 html2canvas($("#certificateBox")

3、生成图片的时候让这张图片显示在模态窗体中，所以在这个模态窗体里放了一个img，在这个img里的src放一个#号来占位的，就是说当前这张图片是没有数据源的。

在配置项里，生成canvas之后就把它显示在模态窗体中。Canvas的返回值是这张图片的宽度和高度。它提供了一个方法，可以把它的数据通过一个URL的形式获取到。获取到这个数据之后就把这个数据添加到模态窗体的src里。

打印图片：
1、 需要获取打印图片的数据。

var dataUrl = canvas.toDataURL();

2、document创建元素，创建一个img标签。

   var newImg = document.createElement("img");

3、把图片链接赋值给dataUrl创建的img标签上。

   newImg.src = dataUrl; 

4、打印的时候会弹出一个新窗体，新的窗体里面需要有一个img的标签，需要把获取到的dataUrl放到img标签里。

通过write的方法，write方法可以识别字符，也可以识别HTML的代码。

5、最后，打印。

printWindow.print();

效果图如下：