<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#qianduanwz {
width: 900px;
height: 383px;
text-align: center;
}
#qianduanwz img {
width: 200px;
margin-top: 60px;
}
</style>
</head>
<body>
<div id="qianduanwz">
<p>学习Web前端<br>canvas</p>
</div>
<img class="image" src="" alt="">
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
html2canvas(document.getElementById('qianduanwz'), {
allowTaint: true,
useCORS: true
}).then(function (canvas) {
document.body.appendChild(canvas);
setTimeout(() => {
let url = canvas.toDataURL('image/png')
var url1 = dataURLtoBlob(url)
console.log(url1)
console.log(getObjectURL(url1))
document.getElementsByClassName("image")[0].src = getObjectURL(url1)
}, 0)
});
function dataURLtoBlob(dataurl) {
var 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);
}
return new Blob([u8arr], { type: mime });
}
function getObjectURL(file) {
var url = null;
if (window.createObjectURL !== undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL !== undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL !== undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
</body>
</html>
使用html2canvas插件html2canvas.hertzen.com/dist/html2c…
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
使用该插件
html2canvas(document.getElementById('qianduanwz'), {
// ...options
}).then(function (canvas) {
document.body.appendChild(canvas);
setTimeout(() => {
let url = canvas.toDataURL('image/png')
var url1 = dataURLtoBlob(url)
console.log(url1)
console.log(getObjectURL(url1))
document.getElementsByClassName("image")[0].src = getObjectURL(url1)
}, 0)
});
将base64转化成blob
function dataURLtoBlob(dataurl) {
var 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);
}
return new Blob([u8arr], { type: mime });
}
blob转化成本地地址
function getObjectURL(file) {
var url = null;
if (window.createObjectURL !== undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL !== undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL !== undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
通常会向后台发送 base64 和 blob这两种格式内容
如果要在画布中添加图片然后生成一个canvas然后导出图片的话会产生跨越问题
