移動端照片上傳、頭像裁剪完整功能，兼容iphone,android (一)

第一步：照片上傳

<input class="js_upFile" type="file" name="cover" accept="image/*" capture="camera" multiple/>

// 獲取瀏覽器的userAgent

var agent=navigator.userAgent.toLowerCase();

var  isIos=(agent.indexOf('iphone') != -1) || (agent.indexOf('ipad') !=-1);

if(isIos)

{

  $(".js_upFile").removeAttr("capture");   //在蘋果上，只要有capture="camera"，它就只打開照相機，其他情況下，相冊，相機都會有

}

 

第二步：展示上傳的圖片及初始化裁剪功能

$(".js_upFile").change(function(e){

    if(test(this.value)==false)
    {
        alert('格式錯誤！');
        return;
    }
   
    var objUrl = getObjectURL(this.files[0]);
    if (objUrl)
    {
        //預覽圖片
        $("#image").attr("src",objUrl);
       //初始化裁剪插件，cropper
        var cropperImage = document.getElementById('image');
         cropper = new Cropper(cropperImage, {
            dragMode: 'move',
            aspectRatio: 1,
            viewMode: 1,
            restore: false,
            guides: false,
            center: false,
            highlight: false,
            cropBoxMovable: false,
            cropBoxResizable: false,
            toggleDragModeOnDblclick: false,
            crop: function(e) {

            }
        });
    }
});
//創建一個可存取file的url
function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}
//圖片格式
function test(value)
{
    var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png)$",'g');
    return regexp.test(value);
}

 

第三步：裁剪完成，獲取圖片

// 確認裁剪，保存圖片
$(".sure").click(function(){
     // 這里獲取到的是base64，如果保存base64到服務器，直接用此值
    var data_src=cropper.getCroppedCanvas().toDataURL('image/png');
     //銷毀
    cropper.destroy();
    $("#image").attr("src","");
});

 // 一般情況下，上傳文件比傳base64要好，理由：大文件上傳會因為網絡問題導致不穩
 //定， 所以，一般上傳大小有限制，而base64體積都會增大，尤其大圖片（此處給我公司 
 //CTO來個掌聲（雖然你不知道他是誰），很有技術追求）
  $(".sure").click(function(){
       var ImageURL=cropper.getCroppedCanvas().toDataURL('image/png');
       var block = ImageURL.split(";");
       var contentType = block[0].split(":")[1];
       var realData = block[1].split(",")[1];
        // base64轉blob
       var blob = b64toBlob(realData, contentType);
        // blob轉file
       var newFile= new File([blob], "filename.png",{type:contentType})
        //  此處調用plupload進行上傳，省略了初始化代碼，看者自己搜用法
        uploader.addFile(newFile);
        uploader.start();
         //銷毀
        cropper.destroy();
        $("#image").attr("src","");
    });
    // blob相關知識查看我的博文：https://www.cnblogs.com/lichunyan/p/9187286.html
    function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;
        var byteCharacters = atob(b64Data);
        var byteArrays = [];
        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);
            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }
        var blob = new Blob(byteArrays, {type: contentType});
        return blob;
    }        
    // 

 

 完畢~