版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_15764943/article/details/85260037
页面生成图片-html2canvas
引入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);
}
});
}