FileReader and canvas and server silde
•
0 j'aime•569 vues
FileReader and canvas and server silde
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à FileReader and canvas and server silde
Similaire à FileReader and canvas and server silde (20)
Plus de Net Kanayan
Dernier
Dernier (9)
FileReader and canvas and server silde
- 2. 自己紹介名前: 金澤宏昭
- 3. SNS Twitter : @kanayannet Facebook : HiroakiKanazawa
- 4. 愛犬家
- 6. FileReader
- 7. 概要 ユーザのコンピュータ内にあるファイル（もしくはバ ッファ上の生データ）をWeb アプリケーションから 非同期的に読み込むことが出来ます。読み込むファイ ルやデータはFile ないしBlob オブジェクトとして指 定します。 by Mozilla
- 9. canvas
- 10. 概要 図形などを描画する為の新しいHTML 要素です。例え ば、グラフを描く、写真を合成する、簡単なアニメー ションからあまり簡単ではないアニメーションの作成 に用いる事が出来ます。 by Mozilla
- 12. FileReader と Canvas 1. input type=" le" からjavascript で画像データを抽出 2. 抽出したデータをcanvas に移す 3. canvas で画像を加工 4. 適切なサイズ(横幅、高さ)に加工 5. 加工した画像を表示
- 17. 挙動の違い
- 18. デモ canvas
- 19. ちなみにJSはこんな感じ $(document).ready(function(){ $("#uploadFile").change(function(){ varcanvas=$("#myCanvas").get(0); varctx=canvas.getContext("2d"); //inputtypefile object varfile=this.files[0]; //mime if(!file.type.match(/^image/(png|jpeg|gif)$/))return; varimage=$('#image').get(0); varreader=newFileReader(); //FileReader読 込 完了 reader.onload=function(evt){
- 20. 続き //image 読 込 完了 image.onload=function(){ varchangeWidth=this.width*0.7; varchangeHeight=this.height*0.7; canvas.width=changeWidth; canvas.height=changeHeight; ctx.drawImage(this,0,0,this.width,this.height,0,0,changeWidth,changeHeight } //base64 画像 URL 指定 image.src=evt.target.result; } // 読 込 reader.readAsDataURL(file); }); });
- 22. どうでした?
- 27. 不具合いろいろ
- 28. iOS iOS8.0.0 , iOS8.0.1 readAsDataURL でエラーが出ます。 非同期でinput type=" le" の中を読むコマンド mobile safari だけでなくchrome も起きるら しい...
- 29. Android Android Browser で不具合色々 Android 4系(4.4未満くらい?)の標準装備のブラウ ザ 自分がこう呼ぶのは..google analytics でそう呼ば れているので。 AOSPブラウザーって呼ぶこともある?
- 30. Android Browser readAsDataURL で読み込めなかったり データ読み込み後、mime が取れなかったり readAsDataURL -> canvas にデータを移す途中でハン ぐったり 最悪ブラウザ落ちたり..涙