使用JS+html2canvas把html页面转化为一张图片

前端把HTML页面转化为一张图片

近日项目有一个需求：把需要分享页面生成一张图片（内容是动态的，生成img格式方便用户操作)

思路：

1.创建canvas元素，按照需要设置该元素的宽高；
2.获取目标元素的宽高；
3.获取画布环境，进行适当的缩放（为了图片的清晰度）
4.使用html2canvas()方法，在其回调中获取处理后的canvas元素，同时在回调中得到画布转化后的src地址，生成新的img元素，添加在页面需要的位置

实现方法：

• 静态页面中的实现：
  html

<div class="test">
  <h1>Hello World!</h1>
   <article>
       哪里奥康国际阿列克警告奥德加卡计算对碰工具djfga'就豆粕将安排欧冠就 拉京东方欧家坡大家
   </article>
   <img src="../img/bg1^.png" alt="">
</div>

css

.test{
     box-sizing: border-box;
     padding: .3rem 5%;
     text-align: center;
}
h1{
    text-align: center;
    line-height: 1rem;
}
article{
    font-size: 0.26rem;
}
img{
    width: 100%;
    margin-top: 0.2rem;
}
 .newImg{
   width: 100%;
}

JS部分

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
 <script>
 //创建一个新的canvas
var canvas2 = document.createElement("canvas");
 let canvasObj = document.querySelector('.test');
 var w = parseInt(window.getComputedStyle(canvasObj).width);   //获取目标元素的宽高
 var h = parseInt(window.getComputedStyle(canvasObj).height);
 //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
 var context = canvas2.getContext("2d");
 context.scale(2, 2);
 canvas2.width = w * 2;
 canvas2.height = h * 2;
 html2canvas(document.querySelector('.test'), { canvas: canvas2 }).then(function (canvas) {
     let image = new Image();
     image.className = "newImg"
     image.src = canvas.toDataURL("image/png");
     document.body.appendChild(image)
 });
 </script>

页面呈现

问题

1.如上图生成的图片中丢失了原文中本来有的图片
等后台对接过页面之后就可以正常显示了

2.前后分离的项目是否会有此问题
不会。该问题应该是访问地址格式不同造成的（以IP+端口或者域名的形式图片才可以正常显示）

PS.前后分离项目中的呈现正常（不管是否对接数据）

注意点：
1：JS代码中有两处是处理图片清晰度的问题，
a.画布环境的缩放+画布的宽高设置；
b.html2canvas()方法提供的第二个参数，官方也没有明确说明，不过该参数确实可以这么用。官方地址：http://html2canvas.hertzen.com/
2：如果出现如下报错
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
可能是页面中有背景图片出现造成的，调整下呈现形式

万般滋味，都是生活。公众号求关注哦!