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>

转载于:https://www.jianshu.com/p/f929af0b03b8