前几天看了一下谷歌的灭霸彩蛋,感觉挺炫酷的,就去学习一下,之后发现其中用了html2cavnas这个东西,所以看了一下这个。
html2canvas官网:html2canvas.hertzen.com/
它主要的功能是把html页面转换成图片
使用:
我主要是在vue里面写的demo,但其实有vue没有什么太大联系
<template>
<div class="contain">
<div id="capture" >
<div style="padding: 10px; background: #f5da55">
<h4 style="color: #000; " @click="toImage">Hello world!</h4>
</div>
<a :href="dataURL" class="down" download="downImg" ref="down">下载</a>
<img src="../assets/img/1.jpg" alt=""/>
<div ref="canvasContain"></div>
</div>
</div>
</template>
复制代码
html2canvas(document.getElementById('capture'))
.then(function(canvas) {
var timestamp = Date.parse(new Date());
_this.dataURL = canvas.toDataURL() // _this=this
_this.$refs.down.download=timestamp+'.png' //设置下载图片的名称和格式
document.getElementsByClassName('contain')[0].appendChild(canvas);});复制代码
data(){ return{ dataURL:0 }}复制代码
利用a标签有一个download属性进行下载,html2canvas(elem,options).then(function(){})
elem是要进行转换的dom元素,options是一些可选项,例如画布的width,height,background等等,function是进行转化之后要进行的操作,html转化为图片后可能清晰度会出现问题,将canvas画布放大若干倍再放到小的容器中就不显得模糊了。