h5开发中，我们经常会遇到类似‘长按界面保存图片’之类的需求，一般情况下只需要img标签即可长按调用系统级api来保存单张图片或识别二维码。
但是如果涉及到整个可视界面的保存，则就需要方法把整个界面转化成图片，此时html2canvas.js则是我们的不二之选。
npm install --save html2canvas
yarn add html2canvas
import html2canvas from 'html2canvas';
componentDidMount() {
html2canvas(document.body,{
// options
}).then(canvas) {
let base64 = canvas.toDataURL("image/png", 2.0);
let ele = document.createElement("img");
ele.setAttribute("src", base64);
ele.style.width = "100%";
ele.style['min-height'] = "100%";
ele.style.top = '0px';
ele.style.zIndex = 9999;
ele.style.position = "absolute";
document.body.appendChild(ele);
}
}
option常见可配置项
imageTimeout: 生成图片超时时间,如果设置为0，则不限时间。若超时，控制台会输出报错信息，
ignoreElements： (element) => false 渲染忽略元素,
logging: 布尔值，方便我们定位问题
onclone： 函数类型，在这里你可以操作生成canvas的dom的节点，
removeContainer： 布尔值，默认为true， 是否清理临时dom节点，
x:偏移x轴的距离，
y:偏移y轴的距离，
scrollX:渲染元素时x轴滚动的距离，
scrollY:渲染元素时y轴滚动的距离，
windowWidth:窗口宽度，
windowHeight:窗口高度
使用方法非常简单,但是稍有不慎就会出现各种各样的问题，因为html2canvas做的是把当前状态下的选中的静态dom转化为canvas，并未涉及到界面滚动，以及一些默认css样式与浏览器默认样式的出入。导致html2canvas‘坑’特别多！
下面盘点一下我在html2canvas中遇到的部分问题，希望能帮到您
1.最常见的，如果界面存在滚动条，而滚动条并未处于顶端，则生成的图片只有当前可视区域。
y: window.pageYOffset,
windowHeight: document.body.scrollHeight
// 只需要option配置y轴方向起点和视窗高度即可解决
2.有时候生成图片不完整。
// 1.可能是照片未加载完成就调用了生成图片的方法
// 2.图片存在跨域问题
// 请在window.onload回调函数中调用。或者界面加载时设置定时器
generateImg = () => {
html2canvas(document.body, () => {
// options
}).then(canvas){
...
}
}
window.onload = () => {
generateImg()
}
// 或者
window.setTimeOut(() => {
generateImg()
}, 300)
// 也可以将图片全部转化为base64编码，则不会存在img异步加载和跨域的问题
// 图片跨域
allowTaint: true,
useCORS: true
3.生成的图片字体大小与dom中不同
// 只需要css规定字体样式即可。html2canvas默认字体样式与浏览器默认不同。
4.在ios下部分图片只显示一半的问题
// 一次我写一个h5的活动界面，出现了一个问题，就是在安卓手机下正常展示无误，
// 但是在ios下图片横向只显示了60%，还有剩下的百分之40是空白，
// 最终通过样式调整定位出问题所在：
// 该图片使用了transform: translateX(),因为此图片要求居中，所以我使用了绝对定位+left: 50% + translateX(-50%)组合。
// 解决方式：
// 1. 修改了居中方式，问题解决。left:0; right: 0
// 2. 兼容苹果写法 -webkit-transform: translateX(-50%);
网友评论