Tools

html转图片下载与保存

阅读：372 发布：2020-01-03 作者：lypeng

新需求，订单数据统计的HTML页面要能转换为图片，然后给负责人发到邮箱~ so,baidu一下~
找到两个文件，html2canvas.js,canvas2image.js，即:html->canvas->image~

网上找的代码，精简了很多：
```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML转图片</title>
	<style>
	    div {padding: 20px;border: 5px solid black;}
	</style>
</head>
<body>
	<h2>原始HTML</h2>

<div style="background:red;width: 600px;" class="test">
		<div style="background:green;">
			<div style="background:blue;">
				<div style="background:yellow;">
					<div style="background:orange;">
						订单数据统计报表
					</div>
				</div>
			</div>
		</div>
	</div>

<h2><button id="save">保存</button></h2>
</body>
</html>
<script type="text/javascript" src="./static/js/jquery.min.js"></script>
<script type="text/javascript" src="./html2canvas.js"></script>
<script type="text/javascript" src="./canvas2image.js"></script>
<script type="text/javascript">
	var test = $(".test").get(0); //将jQuery对象转换为dom对象
	// 直接转为image
	$('#save').click(function (e) {
		// 调用html2canvas插件
		html2canvas(test).then(function (canvas) {
			// canvas宽度
			var canvasWidth = canvas.width;
			// canvas高度
			var canvasHeight = canvas.height;
			// 调用Canvas2Image插件
			// var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
			// console.log(img);//<img src="data64"/>
			// imgdata = Canvas2Image.getImgData(canvas, 'png', canvasWidth, canvasHeight);
			// console.log(imgdata);
			// 调用Canvas2Image插件
			Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png');
		});
	});
</script>
```
点击保存后，输入aa.png即可下载~

------------

另一个问题：怎么不下载，自动保存图片，并在后台发送邮件？

我们可以让ajax请求后台php，传递下imgdata，php写文件，然后发邮件

我们用这个思路写一下，修改canvas2image.js，仿照格式写个获取imgdata的function
```
	var getImgData = function (canvas, type, width, height){
		var strData = getDataURL(canvas, type, width, height);
		return strData
	}

return {
		getImgData: getImgData,
		saveAsImage: saveAsImage,
		...
```
然后ajax请求：
```
imgdata = Canvas2Image.getImgData(canvas, 'png', canvasWidth, canvasHeight);
// console.log(imgdata);
$.ajax({
	url: './index.php',
	data: {'imgdata':imgdata},
	type: 'POST',
	success: function(ret){
		if(ret.status=1){
			alert('success');
		}else{
			alert(ret.msg);
		}
	}
})
```
在php中将imgdata保存到文件test.png中~
```
<?php
	$image = $_POST['imgdata'];
	$filename = 'test.png';
	if (strstr($image,",")){
		$image = explode(',',$image);
		$image = $image[1];
	}
	$r = file_put_contents($filename, base64_decode($image));
	if($r){
		// 图片生成成功，去发送邮件
		// ...
		// 发送邮件结束
		echo json_encode(array('msg'=>'success','status'=>1));
	}else{
		echo json_encode(array('msg'=>'Failed to generate picture','status'=>0));
	}
?>
```
测试可用~

体验：http://t.dpshop.net/front/html2image/index.html?_blank

------本文结束感谢阅读------

上一篇：PHP图像识别测试

下一篇：使用phpword类库替换word内容，生成新文件，然后用libreoffice转换为PDF