最近有个需求，需要将网页保存成图片，一开始用cefsharp，但是DrawToBitmap方法得到的总是空白页。用屏幕截图的话，如果页面超过容器或屏幕的话，就不适用了。 最后找到了js的实现html2canvas。 官网地址：http://html2canvas.hertzen.com/

这里讲下思路：

• 1.通过html2canvas将body元素生成canvas
• 2.将canvas转成blob
• 3.最后创建一个不可见的a标签，然后模拟点击进行下载。

引入html2canvas.js并加入如下代码

html2canvas(document.body,{ useCORS: true },{
}).then(canvas => {
  var data = canvas.toDataURL("image/jpeg", 1);
  data = data.split(',')[1];
  data = window.atob(data);
  var ia = new Uint8Array(data.length);
  for(var i = 0; i < data.length; i++) {
  ia[i] = data.charCodeAt(i);
  }
  var blob = new Blob([ia], {
  type: "image/jpeg"
  });
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = blob.name; //保存出来的文件名称
  link.click(); //触发内存数据存到文件的操作
  window.URL.revokeObjectURL(link.href); //释放内存 
});

碰到的坑：

如果是本地直接打开网页，canvas.toDataURL会报 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported。 这个时候你添加如下代码会导致生成截图有问题。最好还是将网页放到web容器里面去访问。

html2canvas(document.body, {
    allowTaint: true,
    foreignObjectRendering: true
});

有时网页中的图片存在跨域，我们需要添加以下参数来运行跨域

{
useCORS：true
}