html页面转成图片，并传给后台二进制文件流
2018-07-24 本文已影响30人
5df463a52098
最近遇到一个需求，前端页面css画一个表格，用户填写内容后，将当前的表格页面转化成图片传给后台。
实现页面转图片就需要引入html2canvas.js插件了。
1.html2canvas将页面转成了canvas，
2.使用toDataURL转成图片的base^64编码
3.或者使用Blob转成图片的二进制文件流，传给后台
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: relative;
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
}
@page {
size: A4;
margin: 0;
}
@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
table{
border-collapse: collapse;
width: 100%;
height: 100%;
font-size: 14px;
}
table p {
word-wrap: break-word;
word-break: break-word;
}
h2 {
text-align: center;
}
.page > div{
height: 23.7cm;
}
</style>
</head>
<body>
<div class="page">
<div>
<h2>个人简历</h2>
<table border="1">
<tr>
<td colspan="1">姓名</td>
<td colspan="1">XXXXX</td>
<td colspan="1">年龄</td>
<td colspan="1">XXXXX</td>
</tr>
<tr>
<td colspan="1">专业</td>
<td colspan="1">XXXX</td>
<td colspan="1">工作年限</td>
<td colspan="1">XXXXXXX</td>
</tr>
<tr>
<td colspan="1">电话</td>
<td colspan="1">XXXX</td>
<td colspan="1">籍贯</td>
<td colspan="1">XXXX</td>
</tr>
<tr>
<td colspan="1">居住地址</td>
<td colspan="1">XXXXX</td>
<td colspan="1">邮箱</td>
<td colspan="1">XXXXXXXXX</td>
</tr>
<tr>
<td colspan="5">工作经验</td>
</tr>
<tr>
<td colspan="1">XXXX公司</td>
<td colspan="3">
<p>负责工作：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</td>
</tr>
<tr>
<td colspan="1">XXXX公司</td>
<td colspan="3">
<p>负责工作：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</td>
</tr>
<tr>
<td colspan="1">XXXX公司</td>
<td colspan="3">
<p>负责工作：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</td>
</tr>
</table>
</div>
</div>
<div style="margin: 50px 0; text-align: center">
<button>页面转成图片</button>
</div>
<script src="js/jquery.js"></script>
<script src="js/html2canvas.min.js"></script>
<script>
var imgFile = ''
function convertCanvasToImage (canvas) {
let image = new Image()
image.src = canvas.toDataURL('image/png')
// document.body.appendChild(image)
return image
}
$('button').click(function () {
html2canvas($('.page')[0]).then(function (canvas) {
document.body.appendChild(canvas)
let image = convertCanvasToImage(canvas)
console.log('图片', image); // 打印的是图片
/* let ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase()
let dataURL = canvas.toDataURL('image/' + ext)*!/*/
let dataURL = canvas.toDataURL('image/png')
console.log('base64编码', dataURL); // 打印的是图片的base64编码
let arr = dataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
imgFile = new Blob([u8arr], {
type: mime
})
console.log('图片的二进制文件流', imgFile) // 打印的是图片的二进制文件流
})
})
</script>
</body>
</html>
页面：
image.png
控制台打印：
image.png
总结代码知识点：
1、将canvas转成base64
let dataURL = canvas.toDataURL('image/png')
2、将canvas转成图片
let image = new Image()
image.src = canvas.toDataURL('image/png')
3、将canvas转成图片文件流（先转成base64，再转成文件流）
let dataURL = canvas.toDataURL('image/png')
console.log('base64编码', dataURL); // 打印的是图片的base64编码
let arr = dataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
// arr[0]是data:image/png;base64
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
imgFile = new Blob([u8arr], {
type: mime
})
