关于 html2canvs 使用与坑

方案:html2canvas 将html 生成canvas 然后使用canvas的toDataURL转换为base64 形式做下载

安装官网地址:`http://html2canvas.hertzen.com/`

npm     npm install --sava html2canvas
yarn    yarn add html2canvas
在线js  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

使用

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

以上是搬运的官网例子

参数解释

要`element`使用带有一些（可选）选项的html2canvas呈现，只需调用`html2canvas(element, options);`

html2canvas(document.body,{第二个参数可配置}).then(function(canvas) {
    document.body.appendChild(canvas);
});

常用配置以下为我使用的配置具体配置(http://html2canvas.hertzen.com/configuration)

名称	默认	用于
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比率。可以解决不清晰问题
width	`Element` width	宽度 `canvas`
height	`Element` height	高度 `canvas`
logging	true	启用日志以进行调试
allowTaint	false	是否允许跨域图像污染画布

项目中应用

坑　开始喽

一、截图上方白屏

问题滚动条导致截图可见视图高度卷进去的距离就是空白了

解决先回到顶部在生成后回到原来位置

/**
* 获取滚动条的位置，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高
        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高
        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高
        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
};

截图出来就是图片依旧不清楚就很郁闷文字都很清楚但是图片不行你说郁闷不郁闷然后我就骗产品小哥哥就是这样的不然图片里的内容我自己填文字.... 于是蒙混过关

优化前

今天闲着就又不死心的来了准备看看有没有好的代码可以抄抄 !!!!!!

看到设置这些清晰方式的前提是不要使用 background-color 内置图片请使用 <img /> 否则一切配置都是徒劳地址：https://blog.csdn.net/Young_Gao/article/details/101538930

换成img 以后看看这图相当的高清 very good 可算是把心放下来了 ... 来自一个不服输的小可爱.....

优化后

六、对于截出来的图片有锯齿的问题

请教了大佬以后说是切图的上下左右留一些空白就可以可能是浏览器算像素点遇到小数的问题

也确实解决了在此感谢ul老师重新调整了切图 (当然他也看不见)

处理前

处理后

再后来查阅资料的过程中发现有方法可以解决 (不过既然图的换了我就没有在试是否可以解决了有兴趣的小伙伴可以尝试然后来告诉我 )

照抄代码如下地址 https://blog.csdn.net/lmastersparkl/article/details/109205352?utm_medium=distribute.pc_relevant.none-task-blog-title-7&spm=1001.2101.3001.4242

　　　　 var context = canvas.getContext('2d');
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

以上就是大概的心酸路程 ............ 拿到base64以后

保存相册或者分享长图

 给客户端

pc端下载 (download的第二个参数可以自定义图片名称)

const a = document.createElement('a');
a.setAttribute('download', '长图');
a.setAttribute('href', base64);
a.setAttribute('id', 'downloadImg');
if (!document.getElementById('downloadImg')) {
  document.body.appendChild(a);
}
a.click();

挖挖坑埋埋坑摸鱼一天又一天

关于 html2canvs 使用 与 坑

安装 官网地址:http://html2canvas.hertzen.com/

相关

使用

参数解释

要element使用带有一些（可选）选项的html2canvas呈现，只需调用html2canvas(element, options);

常用配置 以下为我使用的配置 具体配置(http://html2canvas.hertzen.com/configuration)