html2canvas 使用 与 坑

需求:将html页面 截图保存到本地 

方案: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>

相关

  • 兼容

    • 该库在以下浏览器（使用Promisepolyfill）上应该可以正常工作：

      • Firefox 3.5+

      • Google Chrome

      • Opera 12+

      • IE9+

      • Edge

      • Safari 6+

  • 介绍

    • 拍摄网页或者其中一部分的'屏幕截图' 截图基于DOM

    • 无法100%精确 因为无法生成实际的截图而是根据页面可用信息构建屏幕截图

  • 运行

    • 脚本遍历加载页面的DOM 它收集那里所有元素的信息，然后将其用于构建页面的表示形式

    • 它实际上并不拍摄页面的屏幕快照 根据它从DOM读取的属性来构建页面的表示形式。

    • 它只能正确呈现它理解的属性 所以很多css无效 (有关支持的css属性 http://html2canvas.hertzen.com/features/ )

      • 大概看了一下 基本上都是支持的

      • 不支持 box-shadow border-image filter 等 (亲测filter确实不支持...........我看除了这三其余的都不咋用的具体的还看上面的链接吧)

  • 限制

    • 脚本使用的所有图像都必须位于同一原点 ，这样它才能在无需代理的帮助下读取它们。

    • 同样，如果canvas 页面上还有其他元素被跨域内容污染，它们将变脏并且无法被html2canvas读取。

    • 该脚本不会呈现Flash或Java applet之类的插件内容。

使用

<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高
       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
};

 

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

优化前  

 

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

看到设置这些清晰方式的前提  是 不要使用 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();

 

 

 

 

 
posted @ 2020-11-19 18:11  啾啾啾啾一口  阅读(3689)  评论(0)  编辑  收藏  举报