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

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

WBOY

リリース： 2016-05-16 15:45:33

オリジナル

2240 人が閲覧しました

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

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

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

var result = document.getElementById("/* エラーメッセージ表示ブロック */"); 🎜>
var input = document.getElementById("/* ファイルタグをアップロードします */"); >
if(typeof FileReader === '未定義'){ result.innerHTML =
"
申し訳ありませんが、お使いのブラウザは FileReader をサポートしていません
"; input.setAttribute(
,'無効'); }else
input.addEventListener('change'
false); }
readFile(){
var ファイル =
.files[0]; if(!/image/w /.test(file.type)){
"ファイルの種類が画像であることを確認してください");
false;
var Reader = new
Reader.readAsDataURL(ファイル)
Reader.onload = 関数(e){
} }
2. キャンバスでの画像処理
JavaScript コード
1. var c=document.getElementById("/* Canvas タグ ID */"); >
2. var cxt=c.getContext("2d");
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;
8. cxt.drawImage(img,0,0,200,200*dic);
9. var
12. ここで注意すべき点がいくつかあります: 1. ローカルでデバッグするとエラーが発生するため、サーバー側でデバッグする必要があります。 2. キャンバスのdrawImage()メソッドには画像のトリミング機能がありますが、画像の伸縮とトリミングを同時に記述すると、トリミングメソッドが先に実行されます。
13. 4. 画像領域の選択とアップロードの方法はまだ試用段階なので、後で私の経験を追加します。以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。原文: http://www.cnblogs.com/liaojh/p/5209433.html