html2canvas基础使用

 官网奉献：Options | html2canvas

一、安装html2canvas

npm install --save html2canvas

二、截图上方白屏

/**
* 获取滚动条的位置，body绝对定位，top值为负当前滚动条的位置。 用于解决截图上方白屏问题
*/
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
$('body').css({
  position: 'fixed',
  top: `-${y}px`,
});

/**
* 生成海报以后 滚动条设置回到原来的位置
*/

$('body').css({
  position: 'static',
});
window.scrollTo(0, y);

三、网络图片截图不显示

（解决  配置中允许网络图片）

html2canvas(canvasObj, {
       allowTaint: true,
       scale: window.devicePixelRatio,  //像素比
       useCORS: true,                   //允许服务器图片
       height: canvasObj.scrollHeight,//canvas高
       width: canvasObj.scrollWidth,//canvas宽
       backgroundColor: "#fb7299",
       logging: false
   }).then((canvas) => {
    　console.log(canvas);
 　});

四、ios截图空白 安卓正常

（问题 怀疑是回到 解决第一个问题的时候  回到顶部又直接回到位置 导致 ios 啥也没看到 

解决 将生成canvas 变成异步的  ）

var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
$('body').css({
   position: 'fixed',
   top: `-${y}px`,
});
setTimeout(() => {
 //获取html元素 可以指定元素 也可以直接document.body  此处是指定的
 let canvasObj = document.querySelector('.boss-box');
 html2canvas(canvasObj, {
       allowTaint: true,
       scale: window.devicePixelRatio,  //像素比
       useCORS: true,                   //允许服务器图片
       height: canvasObj.scrollHeight,//canvas高
       width: canvasObj.scrollWidth,//canvas宽
       backgroundColor: "#fb7299",
       logging: false
   }).then((canvas) => {
    　console.log(canvas);
 　　 //通过canvas.toDataURL() 生成dataurl   图片类型 'image/png' 图片质量 1 
      let base64 = canvas.toDataURL("image/png", 1);
      // 当生成海报之后，再把滚动条设置回原来的位置。
      $('body').css({
           position: 'static',
      });
      window.scrollTo(0, y);
 　});
  }, 500)

五、设置的背景颜色没有了  解决利用opt设置背景色

html2canvas(canvasObj, {
       allowTaint: true,
       scale: window.devicePixelRatio,  //像素比
       useCORS: true,                   //允许服务器图片
       height: canvasObj.scrollHeight,//canvas高
       width: canvasObj.scrollWidth,//canvas宽
       backgroundColor: "#fb7299",      背景色
       logging: false
   }).then((canvas) => {
    　console.log(canvas);
 　});

六，对于截出来的图片不清楚的问题

我看很多博客里说 可以将canvas放大几倍 然后生成的时候按照比例缩小 ....

还有在opt中设置dpi 和 scale 

例如 这样的  

var opts = {
    dpi: window.devicePixelRatio * 4,
    scale: scale, 
};

我是按照官网这样配置的 

var opts = {
    scale: window.devicePixelRatio
};

图片模糊详细可见：vue html2canvas 图片模糊问题_vue3 html2canvas 模糊-优快云博客

文章借鉴https://www.cnblogs.com/chen-yi-yi/p/14006366.html