html2canvas.js网页截图

screenshot(){

console.log('自动截图')

//自动截图

  html2canvas($("#malice"), {

height:$("#malice").outerHeight() +20,

    width:$("#malice").outerWidth() +20  ,

    onrendered:function(canvas) {

//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了

      var timestamp = Date.parse(new Date());

      console.log(timestamp)

//把截取到的图片替换到a标签的路径下载

      console.log(canvas.toDataURL())

$("#down1").attr('href',canvas.toDataURL());

      //下载下来的图片名字

      console.log('download',timestamp +'.png')

$("#down1").attr('download',timestamp +'.png');

      //document.body.appendChild(canvas);

    }

//可以带上宽高截取你所需要的部分内容

  });

}


html

<div @click="screenshot">截图

<div><a id="down1" class="down" href="" download="downImg" >截图下载</a></div>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容