摘要：移動(dòng)端預(yù)覽壓縮上傳圖片推薦一個(gè)使用成熟的解決方案文章已同步我的筆記，歡迎大家加，加后人生更加美好原理介紹移動(dòng)端圖片上傳，通過(guò)生成圖片資源進(jìn)行預(yù)覽，通過(guò)進(jìn)行圖片的壓縮，將圖片轉(zhuǎn)換成對(duì)象上傳。

推薦一個(gè)使用成熟的解決方案：https://github.com/think2011/...

文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后人生更加美好……

移動(dòng)端圖片上傳，通過(guò)FileReader生成base64圖片資源進(jìn)行預(yù)覽，通過(guò)canvas進(jìn)行圖片的壓縮，將圖片url轉(zhuǎn)換成Blob對(duì)象上傳。

初始頁(yè)面布局

使用FileReader進(jìn)行圖片預(yù)覽

/**
 * [previewImg 預(yù)覽圖片]
 * @param  {[type]} input [文件上傳input]
 * @param  {[type]} obj   [description]
 * @return {[type]}       [description]
 */
function previewImg(input,imgObj) {
    var maxsize = 300 * 1024;//超過(guò)300k進(jìn)行壓縮
    //是否支持
    if (typeof FileReader === "undefined") {
        alert("抱歉，你的瀏覽器不支持 FileReader，請(qǐng)使用現(xiàn)代瀏覽器操作！");
        input.setAttribute("disabled","disabled");
    }
    if(input.files && input.files[0]){
        var file = input.files[0],
            reader = new FileReader();
        if(!/image/w+/.test(file.type)) {
            alert("不是有效的圖片文件!");
            return;
        }
        reader.onload = function(e){
            var result =　this.result;//獲取到base64的圖片
            //大于300k圖片進(jìn)行壓縮
            if(result.length >= maxsize){
                var img = new Image();
                img.src = result;
                img.onload = function(){
                    compressSrc = compress(img,0.8,100);
                    $(imgObj).setAttribute("src",compressSrc);
                    //ajax dataURLtoBlob(compressSrc);
                }
            }else{
                $(imgObj).setAttribute("src",result);
                //ajax dataURLtoBlob(result);
            }
        }
    }
}

使用canvas圖片壓縮，不過(guò)在ios中圖片大于2000000像素就無(wú)法使用canvas壓縮，就需要瓦片繪制。

/**
 * [compress 壓縮圖片]
 * @param  {[dom]} sourceImg [圖片dom]
 * @param  {[int]0-1} scale     [縮小的尺寸比例]
 * @param  {[int]0-100} quality   [清晰質(zhì)量]
 * @return {[object]}           [圖片源]
 */
function compress(sourceImg,scale,quality){
    var area = sourceImg.width * sourceImg.height,//源圖片的總大小
        height = sourceImg.height * scale,
        width = sourceImg.width * scale,
        compressCvs = document.createElement("canvas");//壓縮的圖片畫(huà)布
    //壓縮的圖片配置寬高
    compressCvs.width = width;
    compressCvs.height = height;
    var compressCtx = compressCvs.getContext("2d");
    //解決ios 圖片大于2000000像素?zé)o法用drawImage的bug
    if(area > 2000000 && navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)){
        //瓦片繪制
        var smallCvs = document.createElement("canvas"),
            smallCtx = smallCvs.getContext("2d"),
            count = Math.ceil(area / 1000000),//分割的數(shù)量
            cvsWidth = width / count,//每個(gè)小canvas的寬度
            picWidth = sourceImg.width / count;//分割成小圖片的寬度
        smallCvs.height = compressCvs.height;
        smallCvs.width =  width / count;
        //拼湊成大的canvas
        for(var i = 0;i < count;i ++){
            smallCtx.drawImage(sourceImg,i*picWidth,0,picWidth,sourceImg.height,0,0,cvsWidth,height);
            compressCtx.drawImage(smallCvs,i*cvsWidth,0,cvsWidth,height);
        }
    }else{
        compressCtx.drawImage(sourceImg,0,0,sourceImg.width,sourceImg.height,0,0,width,height);
    }
    //將canvas轉(zhuǎn)換成base64
    return compressCvs.toDataURL("image/jpeg",quality/100);
}
function $(id){
    return document.getElementById(id);
}

將圖片url轉(zhuǎn)換為blob對(duì)象

/**
 * [dataURLtoBlob 將base64轉(zhuǎn)換為blob對(duì)象]
 * @param  {[type]} dataurl [圖片源base64]
 * @return {[object]}         [圖片源blob對(duì)象]
 */
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

這個(gè)只是一個(gè)移動(dòng)端預(yù)覽壓縮上傳圖片實(shí)現(xiàn)的demo，會(huì)有一些兼容性和bug問(wèn)題，大家可以自己修改和擴(kuò)展

結(jié)束，撒花~~~

文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后人生更加美好……