CDN引入使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html2canvas</title>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
</body>
</html>
<script>
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
let imageURL = canvas.toDataURL("image/png"); //canvas转base64图片
console.log(imageURL);
});
</script>
vue-cli使用
安装html2Canvas依赖
- npm安装
npm install --save html2canvas - yarn安装
yarn add html2canvas
<template>
<div>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
</div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
data() {
return {
}
},
created(){
this.gethtml2canvas()
},
methods:{
gethtml2canvas(){
setTimeout(() => {
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
let imageURL = canvas.toDataURL("image/png"); //canvas转base64图片
console.log(imageURL);
});
}, 1000);
}
},
components:{
}
};
</script>
<style scoped>
</style>
实现效果
注意:
- 因为html是动态生成的,所以最好加上setTimeout延时转换成canvas,不然可能html的dom元素还没加载完。
- canvas.toDataURl()该方法是将canvas转成图片,如果html中有跨域请求的图片资源,那么canvas就会报错不支持跨域。所以只好将微信头像先上传到服务器的文件系统,请求图片时,带上允许跨域的响应头:Access-Control-Allow-Origin: *
- 要转换成图片的 html,其css样式要有几点注意:
亲测不能使用rem为单位定义文字大小、元素宽高等,不然无法显示该元素
不能添加background,假如设置背景颜色为红色或者一张背景图,莫名其妙会多出一个元素 - canvas.toDataURl()生成的图片是base64的格式data:image/jpeg;base64,/9j/4AAQ…,可以直接作为img标签的src。
但是由于是小程序内嵌H5,且图片资源过大,在某些机型(常见Ios)的微信小程序里面会限流。当生成图片,准备渲染的时候,微信要么会直接白屏,要么就是会弹框提醒:该小程序继续运行会影响微信的使用,强制退出该小程序。
解决方法:
可将base64转成二进制流,资源会减小1到1.5倍
不过在某些安卓国产机型上,不支持长按保存该二进制流图片,所以可以设置仅Ios上转换为二进制图片。
function dataURLtoBlob (data_url) {
let arr = data_url.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
let blob = false
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
try {
blob = new Blob([u8arr], { type: mime })
} catch (e) {}
return blob
}