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。

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
                     
                    }
                })  
                
            }
        });
复制代码

ui注意事项

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