利用canvas實現本地上傳圖片並預覽

模擬點擊input

爲了能使點擊的按鈕可定製，因此咱們採用模擬點擊input的方法來觸發input
input裏面有個類型是file的能夠上傳文件，<input type="file" accept="image/*"/>

function doInput(id){
    var inputObj = document.createElement('input');
    inputObj.addEventListener('change',readFile,false);
    inputObj.type = 'file';
    inputObj.accept = 'image/*';
    inputObj.id = id;
    inputObj.click();
}

讀取圖片

上面函數中點擊input，而後監聽change，選擇圖片以後會執行readFile函數來讀取文件信息

function readFile(){
    var file = this.files[0];//獲取input輸入的圖片
    if(!/image\/\w+/.test(file.type)){
        alert("請確保文件爲圖像類型");
        return false;
    }//判斷是否圖片，在移動端因爲瀏覽器對調用file類型處理不一樣，雖然加了accept = 'image/*'，可是還要再次判斷
    var reader = new FileReader();
    reader.readAsDataURL(file);//轉化成base64數據類型
    reader.onload = function(e){
            drawToCanvas(this.result);
        }
    }
}

canvas預覽圖片

用了一個drawToCanvas函數來將轉化後的base64數據寫到canvas，雖然能夠直接用img標籤直接顯示，可是老是感受顯示會很慢

function drawToCanvas(imgData){
    var cvs = document.querySelector('#cvs');
        cvs.width=300;
        cvs.height=400;
        var ctx = cvs.getContext('2d');
        var img = new Image;
            img.src = imgData;
            img.onload = function(){//必須onload以後再畫
                ctx.drawImage(img,0,0,300,400);
                strDataURI = cvs.toDataURL();//獲取canvas base64數據
            }
}

用canvas呈現更加靈活，若是後面要對圖片進行位置，大小的變換，這樣比較方便

上傳服務器

以上已經獲取到了圖片的base64，因爲圖片的base64字符串很長不能用get方式，經過post去傳給後臺

注意

這裏說一點每次給canvas從新width和height時畫布會從新繪製，也就是init了，還有用css給canvas高寬和字標籤設置是不同的，能夠自行百度

公衆號

咱們的主頁