javascript 页面截图 js网页截图插件

转载

卫斯理 2023-07-11 11:37:27

文章标签 javascript 页面截图 html css Google 文章分类 JavaScript 前端开发

html2canvas可以通过纯JS对浏览器端经行截屏，但截图的精确度还有待提高，部分css不可识别，所以在canvas中不能完美呈现原画面样式

兼容性：
Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Safari 6+

不支持iframe
不支持跨域图片
不能在浏览器插件中使用
不支持Flash
不支持古代浏览器和IE
一、首先我们需要个插件：
1. html2canvas.min.js
2.引入cdn ：http://www.bootcdn.cn/html2canvas/二、插件有了，接下来我们一步一步讲解：
首先我们先做一个复制网页的练习（需要引入html2canvas.min.js）

<a type="button" id="down_button"><button id="creat">点击复制图片</button></a>
<div class="myImg" style="position:relative;">
    <img src="body_background.jpg">
</div>

$("#creat").click(function(){
    html2canvas($("body"),{ // $(".myImg")是你要复制生成canvas的区域，可以自己选
        onrendered:function(canvas){
              dataURL =canvas.toDataURL("image/png");
             $("body").append(canvas);
              console.log(dataURL);

              //下载图片
              $('#down_button').attr( 'href' ,  dataURL ) ;
              $('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
          },
          width:320,
          height:400
      })
 })