填坑记之合成海报:
功能技术: 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);
- }
来源: http://www.bubuko.com/infodetail-3102213.html