javascript将html代码绘制为图片
javascript如何将html代码转为图像，示例使用到了html2canvas这个类库，将html dom对象绘制到canvas中，然后在调用canvas的toDataURL得到图片base64字符串内容，设置img的src为toDataURL返回的内容即可显示html对应的图片。如果需要保存图片，需要自己将base64内容到服务器端进行2进制转换保存为图片后设置content-disposition为attachment进行图片文件的保存，要不浏览器会直接显示图片，而不是弹出保存对话框。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>javascript将html代码绘制为图片</title>
<style>#render{position:absolute;left:0;top:0;display:none}</style>
</head>
<body><div id="render"></div>
请输入html代码：<textarea id="html" rows="8" cols="80"><b style="color:red">html代码</b><br />好好</textarea><br />
<input type="button" onclick="renderHTMLAndSave()" value="将textarea输入的html绘制到canvas" /><br />
<script type="text/javascript" src="/demo/html2canvas/html2canvas.js"></script>
<script type="text/javascript">
var canvas,render,html;
function renderHTMLAndSave() {
if (!render) {
render = document.getElementById('render');
html = document.getElementById('html');
}
render.style.display = 'block';//必须要显示，要不绘制不出来
if (canvas) document.body.removeChild(canvas);//删除上一次生成的canvas对象
render.innerHTML = html.value;//设置显示容器呈现html UI
html2canvas(render).then(function (canvas) {
render.style.display = 'none';
window.canvas = canvas;
document.body.appendChild(canvas);
});
}
</script>
</body>
</html>
参考
Content-Disposition inline attachment介绍
Asp.Net图片base64编码相互转换
加支付宝好友偷能量挖...
原创文章，转载请注明出处：javascript将html代码绘制为图片