html2canvas截图

备注：由于IE下不支持html2canvas，下面的方法对浏览器进行了判定。html2canvas截取屏幕的url赋给a标签，a标签具有download属性，点击时可以下载文件。同样IE不支持a标签的download属性，所以IE情况下，需要先将图片保存在服务器上，通过a标签的href属性，下载文件。一、

function createImage(){
    var width = document.getElementById("content").offsetWidth;
    var height =$("#content").height();
    //判断浏览器是否为IE
    var isIE = false;
    if (!!window.ActiveXObject || "ActiveXObject" in window){
           isIE = true;
      }

   //截图
   html2canvas(document.querySelector("#content"),{width:width,height:height}).then(
            function(canvas){

                         var html_canvas = canvas.toDataURL();
                         if(isIE){
                                $.post('', {html_canvas:html_canvas}, function(json){}, 'json');
                                var href = "index.php?r=download&filename=aaa.png";
                                document.querySelector("#down-image").setAttribute('href',href);
                        }else{
                            document.querySelector("#down-image").setAttribute('href',html_canvas);
                        }

            });

}

页面元素：

<?php if($isIE){ ?>
            <a id="down-image">下载</a>
        <?php }else{ ?>
            <a  href="" download="aaa.png" id="down-image">下载</a>

        <?php } ?>

二：<?php

if (isset($_POST['html_canvas'])) {
    $html_canvas = $_POST['html_canvas'];
    $image = base64_decode(substr($html_canvas, 22));
    header('Content-Type: image/png');
    $fp = fopen('aaa.png', 'w');
    fwrite($fp, $image);
    fclose($fp);
}

?>

 

三：IE浏览器下载图片的后端程序为：

 public function actionDownload($filename)
    {
        $filename_o = ‘aaa.png';
        $file=fopen($filename,"r");
        $size=filesize($filename);
        header("Content-Type: application/octet-stream");
        header("Accept-Ranges: bytes");
        header("Accept-Length: ".$size);
        header("Content-Disposition: attachment; filename=".$filename_o."");
        echo fread($file, $size);//下载
        fclose($file);
        unlink($filename);//删除文件
    }

解释：1、document.querySelector("#content")：需要截取的div

            2、{width:width,height:height}：截取的宽度和高度

            3 、$.post('', {html_canvas:html_canvas}, function(json){}, 'json')：对应的php方法为二

​# html2canvas生成截图的命令

html2canvas(document.querySelector("#down-content"),{width:width,height:height}).then(

            function(canvas){
                         var html_canvas = canvas.toDataURL();
                         if(isIE){
                                $.post('', {html_canvas:html_canvas}, function(json){
                                }, 'json');
                                var href = "index.php?r=client/client-summary/download&id="+"$id"+"&filename="+ "$filename";
                                document.querySelector("#down-image").setAttribute('href',href);
                        }else{
                            document.querySelector("#down-image").setAttribute('href',html_canvas);
                        }
            });

​