Download to read offline
![ちなみにJSはこんな感じ$(document).ready(function(){$("#uploadFile").change(function(){varcanvas=$("#myCanvas").get(0);varctx=canvas.getContext("2d");//inputtypefile objectvarfile=this.files[0];//mimeif(!file.type.match(/^image/(png|jpeg|gif)$/))return;varimage=$('#image').get(0);varreader=newFileReader();//FileReader読 込 完了reader.onload=function(evt){](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffilecanvas-160724010157%2f75%2fFileReader-and-canvas-and-server-silde-19-2048.jpg&f=jpg&w=240)
Uploaded byNet Kanayan
574 views
FileReader and canvas and server silde
FileReader and canvas and server silde
Recommended
More Related Content
Viewers also liked
More from Net Kanayan
FileReader and canvas and server silde
- 1.
- 2.
- 3.SNSTwitter : @kanayannetFacebook: HiroakiKanazawa
- 4.
- 5.
- 6.
- 7.概要ユーザのコンピュータ内にあるファイル（もしくはバッファ上の生データ）をWeb アプリケーションから非同期的に読み込むことが出来ます。読み込むファイルやデータはFile ないしBlobオブジェクトとして指定します。 by Mozilla
- 8.
- 9.
- 10.
- 11.
- 12.FileReader とCanvas1. input type="le" からjavascript で画像データを抽出2. 抽出したデータをcanvas に移す3. canvas で画像を加工4. 適切なサイズ(横幅、高さ)に加工5. 加工した画像を表示
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 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);});});
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.iOSiOS8.0.0 , iOS8.0.1readAsDataURLでエラーが出ます。非同期でinput type=" le" の中を読むコマンドmobile safari だけでなくchrome も起きるらしい...
- 29.AndroidAndroid Browser で不具合色々Android4系(4.4未満くらい?)の標準装備のブラウザ自分がこう呼ぶのは..google analytics でそう呼ばれているので。AOSPブラウザーって呼ぶこともある?
- 30.Android BrowserreadAsDataURL で読み込めなかったりデータ読み込み後、mime が取れなかったりreadAsDataURL-> canvas にデータを移す途中でハンぐったり最悪ブラウザ落ちたり..涙
- 31.
- 32.
- 33.
- 34.