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

});

}

页面元素：

<?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(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);
}

});

猜你喜欢