将HTML内容生成图片

开发工具与关键技术：VS/MVC
作者：何桂朋
撰写时间：2019年5月7日

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片。(这段来自前端开发博客)
基本语法

html2canvas(element,options)
Element 意思是“元素”，可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片
Options 意思是“选择项”。

例子：

var width = $(".txtBox").width();
$("#modelImage .modal-dialog").width(width);
     html2canvas($("#certificateBox"), {
     onrendered: function (canvas) {
     console.log(canvas);
     //生成base64图片数据
     var dataUrl = canvas.toDataURL();
     $("#modCertificateImg").attr("src", dataUrl);
}
});

allowTaint：是否允许交叉源图像—允许跨域
background：画布背景颜色(如果DOM中没有指定)。为透明画布设置undefined
height：以像素为单位定义画布的heigt。如果为空，则以窗口的全高呈现
letterRendering：是否将每个字母单独呈现。如果使用字母间距，则是必要的。
Logging：在console.log ()中输出信息
Proxy：指向代理的Url，该代理将用于加载跨源图像。如果留空，则不会加载交叉原点图像
taintTest：是否在渲染前测试图片
timeout：加载图像的超时，以毫秒为单位。将其设置为0将不会导致超时。
Width：以像素为单位定义画布的宽度。如果为空，则以窗口的全宽度呈现。
示例：

@{
    Layout = null;
}



    
    
    
    


  
 
     

       
       

          
重庆邮电大学学生安全知识网络测试
          
合格证书
          
姓 名：

          

          于___年__月__日
         参加重庆邮电大学学生安全知识网络测试，得分:
分,成绩合格。
          
特发此证！
          

          证书编号：
          
          重庆邮电大学
         
          

          
      
 

效果图：