页面生成图片-html2canvas

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/qq_15764943/article/details/85260037

引入js

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

html2canvas详细参考官方：http://html2canvas.hertzen.com/

示例

编写html，指定根标签id：table

<table id="table" border="1px" style="height: 100px;width: 100px;background-color: #CCCCCC;" align="center">
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>2</td>
		<td>2</td>
		<td>2</td>
	</tr>
</table>

生成图片base64

$("#bun").click(function() {
	html2canvas(document.querySelector("#table")).then(function(canvas) {
		var imgUri = canvas.toDataURL();
		console.log(imgUri); //图片：base64字符串
		$("body").append('<a href="' + imgUri + '" download="'+Date.parse(new Date())+'">下载图片</a>');
	})
})

备注：测试下载图片，可使用Firefox 和 Chrome浏览器

base64转File对象

function base64URLtoFile(base64Url, filename) {
	var arr = base64Url.split(','),
		mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	while(n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new File([u8arr], filename, {
		type: mime
	});
}

base64图片上传

function fileupload(base64Url) {    
	var form = document.forms[0];    
	var formData = new FormData();    
	formData.append("file", base64URLtoFile(base64Url, Date.parse(new Date()) + ".png"));       
	$.ajax({
		url: '/file/upload',
		type: 'POST',
		data: formData,
		dataType: 'json',
		async: true,
		cache: false,
		contentType: false,
		processData: false,
		success: function(data) {
			console.log(data);
		},
		error: function(data) {
			alert(data);
		}
	});
}