モバイル端末H 5ピクチャにアップロードされたこれらのピット

先週はモバイル端末の画像を圧縮してアップロードする機能を作りました.いくつかのピットを踏んで、ここでまとめます.
大体の考えは、一部のAPIの互換性はcaniuseを参照してください.

は、FileReaderを利用して、blob を読み取るか、またはfile を利用して、画像をdata uriの形式に変換する.

はcanvasを使用して、ページにキャンバスを新設し、canvasから提供されたAPIを利用して、このキャンバスの中に絵を描きます.

はcanvas.toDataURL()を利用して、ピクチャの圧縮を行い、画像のdata uriの値

を得る.

ファイルをアップロードします.

ステップ1では、ピクチャの圧縮を行う前に、または画像のサイズを判断しました.画像のサイズが200 KBより大きい場合は、直接に画像のアップロードを行い、画像の圧縮を行いません.画像のサイズが200 KBより大きい場合は、先に画像の圧縮を行ってからアップロードします.

    var fileChooser = document.getElementById("choose"),
        maxSize = 200 * 1024;   //200KB
    fileChoose.change = function() {
        var file = this.files[0],   //    
            reader = new FileReader();
            
            reader.onload = function() {
                var result = this.result,   //result data url   
                    img = new Image(),
                    img.src = result;
                    
                    
                if(result.length < maxSize) {  
                    imgUpload(result);      //      
                } else {
                    var data = compress(img);    //        
                    imgUpload(data);                //    
                }
            }
            
            reader.readAsDataURL(file);
    }

ステップ2、3:

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        
    function compress(img) {
        canvas.width = img.width;
        canvas.height = img.height;
        
        //  canvas    
        
        //              0.2 。
        var data = canvas.toDataURL('image/jpeg', 0.2); //data url   
        
        return data;
    }

canvasを利用して絵を描く過程で、IOS画像をアップロードする過程において、このような問題が存在する:

携帯を縦に持つと、写真を撮ってアップロードすると、自動的に写真が回転します.横で写真を撮って写真をアップロードすると、この問題が発生しません.このとき、ピクチャの自動回転を訂正したい場合は、ピクチャをバイナリデータ( binaryajax.js)に変換し、ピクチャのexif を容易に取得し、exif を取得することによって、ピクチャの回転角度( exif.js)を決定し、ピクチャに対応する回転処理を行う.解決方法を教えてください.

を押してください.

は、IOSにおいて、ピクチャのサイズが2 MBより大きい場合、ピクチャが潰される場合があり、この場合、ピクチャの割合をリセットする必要がある.解決方法を教えてください.

を押してください.

FileReaderを利用して、画像を読み取る過程は一定の時間がかかり、canvasキャンバスに画像データを注入するには一定の時間が必要です.画像圧縮の過程で、画像が大きいほど、CPU計算による消費時間も長くなり、トンカードが発生する可能性があります.つまり、この過程では時間がかかります.

IOS 8.1のバージョンにFileReaderのバグがあります.FileReaderで読み取った画像がBase 64に変換された時、文字列が空です.具体的な問題の説明は

を押してください.
ステップ4、ファイルアップロードには2つの方法があります.

は、写真をbase 64

に変換する.

画像データをBlobオブジェクトに変換し、FormDataを使ってファイルをアップロードする

.
方式1はxhr ajaxまたはxhr 2 FormDataで提出できます.
方法2ここに大きな穴があります.具体的な説明は私を突いてください.
簡単に言えば、Blob はFormData に注入できません.
画像のdata uri を手に入れたら、Blobデータタイプに変換します.

    var ndata = compress(img);
    ndata = window.atob(ndata); // base64         
    
    //    buffer  ，        
    var buffer = new Uint8Array(ndata.length);
    for(var i = 0; i < text.length; i++) {
        buffer[i] = ndata.charCodeAt(i);
    }
    
    // buffer     Blob    
    var blob = getBlob([buffer]);
    
    var fd = new FormData(),
        xhr = new XMLHttpRequest();
    fd.append('file', blob);
    
    xhr.open('post', url);
    xhr.onreadystatechange = function() {
        //do something
    }
    xhr.send(fd);

Blob の新規作成には互換性のある処理が必要であり、特にFormDataのアップロードをサポートしていないandriodマシンの互換性処理が必要である.具体的な方法は私の主な実現の詳細を突いてください.HTTP要求を書き換えることによってです.
2月19日更新
Androidマシンの中で、一部blobの機種は4.xの中でwebviewの対象を去勢しました.たとえば、fileの値が取れないです.
2月22日に更新しますfile.typeの下でAndroid4.4は、システムのWebViewインターフェースが変更されたため、ファイルが選択できなくなり、ファイルをアップロードできなくなりました.
パッケージされたgithubライブラリを押してください.文章がいいと思ったら、あなたのスターをけちけちしないでください.