备注:由于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
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(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);
}
});