html2cavnas

前几天看了一下谷歌的灭霸彩蛋，感觉挺炫酷的，就去学习一下，之后发现其中用了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画布放大若干倍再放到小的容器中就不显得模糊了。

git：github.com/Lsunshinean…

转载于:https://juejin.im/post/5ce9f1d55188252ca46a1982