<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html2canvas</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta3/html2canvas.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.js"></script> -->
<!-- <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
<style>
*{
margin: 0;
padding: 0
}
#content{
width: 90%;
margin: 0 auto;
height: 300px;
text-align: center;
line-height: 300px;
border:1px solid #333;
box-sizing: border-box;
}
a {
cursor: pointer;
color: #333;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="content" >
<h1>hello html2canvas!</h1>
</div>
<script>
$("#content").on("click", function(event) {
event.preventDefault();
var userAgent = navigator.userAgent;
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
html2canvas($('#content'), {
allowTaint: true,
taintTest: false,
useCORS: true, //火狐浏览器添加项
onrendered: function(canvas) {
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var userAgent = navigator.userAgent;
//判断是否是IE11
debugger
if (-1 !== userAgent.indexOf("Trident")) {
var arr = image.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120055934
原创文章，作者：6024010，如若转载，请注明出处：https://blog.ytso.com/275890.html