t-horikiri
https://blog.hatena.ne.jp/t-horikiri/
@thorikiriのてょりっき
https://blog.horihavalabo.jp/
html5
<input type="file">で指定したファイルを取得するのは、ev.target.filesで取得出来ます。複数選択することも可能なように出来るので、配列になっています。今回は1つだけです。 後はFileReaderを使って読み取って、Canvasに描画します。FileReaderのonloadでImageのsrc属性に取得したdataURLを設定する。ImageのonloadでcontextにdrawImageすればいいですね。サンプルコードは次の通り。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <…
190
<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.horihavalabo.jp%2Fentry%2F20131018%2F1382086744" title="File APIで選択した画像をCanvasに描画する - @thorikiriのてょりっき" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe>
Hatena Blog
https://hatena.blog
2013-10-18 17:59:04
File APIで選択した画像をCanvasに描画する
rich
https://blog.horihavalabo.jp/entry/20131018/1382086744
1.0
100%