填坑记之合成海报：
功能技术：http://html2canvas.hertzen.com
问题描述：合成模糊、合成区域内容错位，合成不完整，合成边缘白条等。
解决方案：如有页面布局正常合成错位的，可以检查元素是否使用了transform属性，尝试不用这个属性再去合成。
图片缺失和模糊参考如下代码，合成前递归加载图片，并在参数处设定倍数。
//准备海报
function poster(){
var posterImgList = [
"h5/img/poster/1.jpg",
"h5/img/poster/2.png",
"h5/img/poster/3.png",
"h5/img/poster/4.png",
"h5/img/poster/5.png",
"h5/img/poster/6.png",
"h5/img/poster/7.png",
"h5/img/poster/8.png",
"h5/img/poster/9.png"
];
superLoadImg(posterImgList,0);
}
//递归load图片
function superLoadImg(imgList,imgIndex){
if(imgIndex < imgList.length){
var imgObj = new Image();
imgObj.src = imgList[imgIndex];
imgObj.onload = function () {
console.log("加载图片"+imgIndex);
if(imgIndex == imgList.length- 1){
finalCompoundPoster();
}else{
imgIndex=imgIndex+1;
superLoadImg(imgList,imgIndex);
}
}
}
}
//合成海报最终 function finalCompoundPoster(){ setTimeout(function(){ var opt = { scale:2, width:$(‘#poster‘).width() - 1,//设置canvas尺寸与所截图尺寸相同，防止白边 height:$(‘#poster‘).height() - 1,//防止白边 } html2canvas(document.querySelector("#poster"),opt).then(function(canvas) { try{ canvas.style.width="100%"; canvas.style.height="100%"; var saveImage = canvas.toDataURL(‘image/jpeg‘); $(‘#posterImg‘).attr("src",saveImage); }catch(err){ alert(err); } }) },200); }