前端把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.
可能是页面中有背景图片出现造成的,调整下呈现形式
万般滋味,都是生活。公众号求关注哦!