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注意事項

設計時考慮屏幕大小，不要把主要的顯示內容，放在太邊上，稍微靠裏。