利用javascript实现页面截图(html2canvas的用法)

今天我来总结一下怎么利用javascript实现页面截图,这是我在公司项目中遇到过的问题。

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

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

**有以下问题:**
  • 不支持iframe
  • 不支持跨域图片
  • 不能在浏览器插件中使用
  • 不支持Flash
  • 不支持古代浏览器和IE

一、首先我们需要个插件:
1. html2canvas.min.js 下载地址:http://download.csdn.net/detail/webxiaoma/9853415

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
      })
 })

以上代码当你点击按钮button时,页面会自动复制一份$(“.myImg”) 放在插入到body后面,

你可能感兴趣的:(小常识,HTML5/CSS3)