HTML5 キャンバス モバイル ブラウザーでの画像圧縮アップロード_html5 チュートリアル スキル

最近モバイル端末でアバターのアップロード機能を設計したとき、当初は を指定して formData 経由で直接アップロードしていましたが、実際の使用方法は次のとおりです。高画素携帯電話など） アップロード時間が長すぎるとアップロードに失敗しますし、毎回オリジナルサイズの画像をアップロード（バックグラウンド処理圧縮）するとユーザーエクスペリエンスに大きく影響するため、圧縮方法を検討しました。キャンバスを通して画像をアップロードして、以下にいくつかのアイデアと考えを示します:

1. ローカル画像を取得し、キャンバスに画像を描画します。ここでの問題点は、ブラウザの保護メカニズムにより、ローカル ファイルの画像パスを直接取得できないため、ローカル画像を Base64 形式にコンパイルしてからアップロードする必要があることです 。コードは次のとおりです。

JavaScript コードコンテンツをクリップボードにコピーします

1. var result = document.getElementById("/* エラーメッセージ表示ブロック */"); 🎜>
2. var input = document.getElementById("/* ファイルタグをアップロードします */"); >
4. if(typeof FileReader === '未定義'){ result.innerHTML =
5. "

   申し訳ありませんが、お使いのブラウザは FileReader をサポートしていません

   "; input.setAttribute(
'無効'
6. ,'無効'); }else
{
7. input.addEventListener('change'
,readFile,
8. false); }
関数
10. readFile(){
11. var ファイル =
this
12. .files[0]; if(!/image/w /.test(file.type)){
alert(
13. "ファイルの種類が画像であることを確認してください");
return
14. false;
}
15. var Reader = new
FileReader();
16. Reader.readAsDataURL(ファイル)
17. Reader.onload = 関数(e){
// this.result コンパイルされた画像エンコーディングは、src
で直接表示できます。
19. } }
20. 2. キャンバスでの画像処理
21. JavaScript コード
コンテンツをクリップボードにコピーします
22. 1. var c=document.getElementById("/* Canvas タグ ID */"); >
    2. var cxt=c.getContext("2d");
    var
    3. img=new Image(); img.src=/* 取得した画像エンコードアドレス */
    ;
    4. var width = img.width;
    5. var 高さ = img.height; dic = 高さ / 幅;
    6. c.width = 200; //画像圧縮の基準、ここでは 200px のデポジットに基づいて計算されます
    7. c.height = 200 * dic;
    cxt.clearRect(0,0,200,200*dic);
    8. cxt.drawImage(img,0,0,200,200*dic);
    9. var
    finalURL = c.toDataURL();
    // 取得された最終 URL は圧縮された画像エンコーディングであり、これを使用して画像タグをアップロードまたは直接生成できます
    12. ここで注意すべき点がいくつかあります: 1. ローカルでデバッグするとエラーが発生するため、サーバー側でデバッグする必要があります。 2. キャンバスのdrawImage()メソッドには画像のトリミング機能がありますが、画像の伸縮とトリミングを同時に記述すると、トリミングメソッドが先に実行されます。
    3. AJAX を使用して画像エンコードをアップロードすると、エンコード内のプラス記号がスペースに変換され、バックグラウンドでのコンパイルが失敗します。
    13. 4. 画像領域の選択とアップロードの方法はまだ試用段階なので、後で私の経験を追加します。 以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。 原文: http://www.cnblogs.com/liaojh/p/5209433.html