js把html的代码转换成图片的base64 编码的数据流

最新推荐文章于 2024-09-11 11:00:04 发布

纸菜不是菜

最新推荐文章于 2024-09-11 11:00:04 发布

阅读量2.7k

点赞数

分类专栏： JS HTML IT

本文链接：https://blog.csdn.net/paperveg/article/details/89965619

版权

HTML 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

4 篇文章 1 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

		1.需要用到加载到的js
		html2canvas.min.js
		获取需要装换图片的dom对象,可以是一个table 或者div 或者整个body标签
		例子为用的是div
			代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../scripts/html2canvas.min.js"></script>
</head>
<body >
<div id="test1">
    <table>
    	<tr>
        	<td>test123456</td>
            <td><input type="text" id="test23"/></td>
            <td><button id="test" onClick="ChangePng();" >test</button></td>
        </tr>
    </table>
</div>
<script>
function ChangePng()
{
	//要转换为图片的dom对象
    var element = document.getElementById('test1');
    //调用html2image方法
    html2image(element);
}
function html2image(source) 
{
	html2canvas(source).then(function(canvas) 
	{
		var imageData = canvas.toDataURL(1);
		console.log(imageData);//输出控制台,浏览器按f12可以查看输出的log(不会使用也可以使用alert(imageData)
	});
}
</script>
</body>
</html>