h5全屏活动页面，canvans

h5全屏活动页面，canvans截图总结

前端注意事项

布局方式用百分比布局，media做特殊机型适配

切图尽量切小图，不要切一整张

html2canvans截图是注意事项

不支持一下属性

background-blend-modeM
border-image
box-decoration-break
box-shadow
filter
font-variant-ligatures
mix-blend-mode
object-fit
repeating-linear-gradient()
writing-mode
zoom
使用上述css属性，需要进行替换，插件不支持
使用background。进行截图,截出来的图片会不清楚，苹果手机生成base64时没有进行到回调（目前不知道什么原因，安卓手机正常）建议用img替换，不用background。

苹果手机注意

上传图片时会出现图片翻转，input输出是竖图，canvans转换没准就是横图，需要拿到照片设备信息，进行相应的转换。 使用的插件exif.js。

如果遇见截图之后有白框

1可以设置canvans的背景颜色 与所截图一样就可以 backgroundColor: '#BE2E31'
2.可以设置canvas x，y属性，这个是根据截取的图片，距离浏览器左边 上面的距离。因为取到了小数，所以截图的时候出现白边。可以设置所截取的图片，在最左边和上边 top 0 left0。要不就用px的像素。

另外苹果手机还不支持css befor after样式 ！！！

function getImgData(img,dir,next){
        var image=new Image();
        image.onload=function(){
        var degree=0,drawWidth,drawHeight,width,height;
        drawWidth=this.naturalWidth;
        drawHeight=this.naturalHeight;
        //以下改变一下图片大小
        var maxSide = Math.max(drawWidth, drawHeight);
        if (maxSide > 1024) {
        var minSide = Math.min(drawWidth, drawHeight);
        minSide = minSide / maxSide * 1024;
        maxSide = 1024;
        if (drawWidth > drawHeight) {
        drawWidth = maxSide;
        drawHeight = minSide;
        } else {
        drawWidth = minSide;
        drawHeight = maxSide;
        }
        }
        var canvas=document.createElement('canvas');
        canvas.width=width=drawWidth;
        canvas.height=height=drawHeight;
        var context=canvas.getContext('2d');
        //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
        switch(dir){
        //iphone横屏拍摄，此时home键在左侧
        case 3:
        degree=180;
        drawWidth=-width;
        drawHeight=-height;
        break;
        //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
        case 6:
        canvas.width=height;
        canvas.height=width;
        degree=90;
        drawWidth=width;
        drawHeight=-height;
        break;
        //iphone竖屏拍摄，此时home键在上方
        case 8:
        canvas.width=height;
        canvas.height=width;
        degree=270;
        drawWidth=-width;
        drawHeight=height;
        break;
        }
        //使用canvas旋转校正
        context.rotate(degree*Math.PI/180);
        context.drawImage(this,0,0,drawWidth,drawHeight);
        //返回校正图片
        next(canvas.toDataURL("image/jpeg",.8));
        }
        image.src=img;
    } 
    //input获取图片信息
    EXIF.getData(file,function(){
            roted = file.exifdata.Orientation;   //获取旋转角度          
            var  reader = new FileReader();        
            reader.readAsDataURL(file);
            reader.onload = function(e){ 
                getImgData(this.result,roted,function(data){
                     // data base64
                     
                    }
                })  
                
            }
        });

function create_img(selector){
    var targetDom = document.getElementById(selector);
    var canvans = html2canvas(targetDom,{
        allowTaint: false,
        useCORS: true,
        height: targetDom.offsetHeight, // 下面解决当页面滚动之后生成图片出现白边问题
        width: targetDom.offsetWidth,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight,
        // x: 20,
        // y: 0,
        dpi: window.devicePixelRatio * 2, // 解决图片不清晰问题
        scale: 2
    })
    return canvans
}

ui注意事项

设计时考虑屏幕大小，不要把主要的显示内容，放在太边上，稍微靠里。