JavaScript で File オブジェクトの画像のサイズを取得する方法
JavaScript で File オブジェクトとして保持された画像ファイルのサイズ（幅・高さ）を取得する方法についてです。 Node ではなくクライアントサイドの JavaScript でのお話です。 早速結論ですが、 Image オブジェクトを生成して src にそのファイルの中身をセットし、 onload コールバックが呼ばれたときにサイズを取得すれば OK です。 const img = new Image(); img.onload = () => { // ここでサイズが取得できる const size = { width: img.naturalWidth, height: img.naturalHeight, }; URL.revokeObjectURL(img.src); console.log(size); }; img.src = URL.createObjectUR
大きな画像をJavaScriptでリサイズしてからAjax送信する方法
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R
Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。 今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。 サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。 Canvasの内容をサーバへ送信する 実行例 ソース HTML JavaScript PHP 解説 Canvasを画像として取り出す サーバへ送信する サーバでバイナリとして保存する 参考ページ Canvasの内容をサーバへ送信する 実行例 以下から実際のサンプルをお試しいただけます。 miku3.net 左側にあるテキストボックスへ入力するとその場でCanvasに反映されます。同様に文字色や背景色も指定したタイミングでCanvasが
![[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd4ec00f9e7dc008c0692333e4281a83ea17d3a6/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125045644.png)
[JavaScript] FileList オブジェクトを理解する｜tsuchippo blog
選択したファイルをあれこれ操作したい 下記のようなファイル選択画面でユーザが選択したファイルに関して、実際にサーバにアップロードする前にファイルの中身をチェックしたり、バリデーション(ファイル形式や容量制限)をかけたい… ということって結構ありますよね。 なんの制限もなくドカドカ上げられちゃうとサーバが逼迫したりするので… そういったときに役立つかもしれない？ ファイル操作のアレコレや FileList オブジェクトに関してまとめてみようかな〜ということで今回は、
![[JavaScript] FileList オブジェクトを理解する｜tsuchippo blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/42ef4d4cc0ac17815f31551e45d160675b99715f/height=288;version=1;width=512/https%3A%2F%2Ftsuchippo.com%2Fwp-content%2Fuploads%2F2021%2F06%2Ffilelistobj.jpg)
ときどきWEB | HTML5のFile APIでローカルファイル情報取得してやんよ!!!
そろそろHTML5 APIのひとつでもリファレンスしていこうかな・・・ かといって今さらcanvasとかやってもしょうがないし、MathMLみたいなマニアックなものは覚えても使う機会があるかどうか・・・という事で 『File API』というヤツを手始めに覚えようかと思います。 『File API』について HTML5以前はブラウザ(またはWebアプリ)からローカルファイルを扱うには<input type="file">タグを利用してユーザーがファイルをアップロードする必要がありましたが、 File APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。 このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。 主なAPIの種類 File AP
ファイルのアップ、切り取り、リサイズ、ウェブカム利用、フィルタ等ができる超多機能JSライブラリ「FileAPI」:phpspot開発日誌
ファイルのアップ、切り取り、リサイズ、ウェブカム利用、フィルタ等ができる超多機能JSライブラリ「FileAPI」 2013年11月13日- FileAPI ? a set of javascript tools for working with files. ファイルのアップ、切り取り、リサイズ、ウェブカム利用、フィルタ等ができる超多機能JSライブラリ「FileAPI」。 ファイルのアップは複数アップやドラッグ＆ドロップアップ、ウェブカムからの取り込みも可能で、アップした画像にウォーターマークをつけたり、Instagram風にフィルタをつけたり、とにかくファイルアップして画像を扱うようなサイトを作る際に使えそうなJSライブラリです。 サーバサイド用にはphpクラスが用意されており、サーバサイドにも対応。 デモを見てみるだけでも何かできそうな気になります。 関連エントリ フラットで超カッコい
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Read files in JavaScript Stay organized with collections Save and categorize content based on your preferences. How to select files, read file metadata and content, and monitor read progress. Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, uploading photos
【HTML5】File APIを使って、投稿された画像を即時表示する方法【小ネタ】
こんにちは、橋本です。 今回は小ネタを１つ紹介したいと思います。 画像投稿フォームを作る際に、投稿された画像を即時表示したいなんてことありませんか？ そんなときに便利なのが、HTML５で追加されたFile API。 File APIを使えば、投稿された画像（正確には、選択されたローカルファイル）の情報を取得することができます。 では、画像投稿機能のサンプルを元に、File APIの使い方を見て行きましょう。 File API自体はjQueryと何の関係もありませんが、いろいろと面倒なので今回もjQueryを使っています。 サンプル <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.js" type="text/jav
第5回 File APIを使ったiOS/Androidアプリケーション作成［その2］ | gihyo.jp
前回は、iOS/Androidのアプリケーション構造や、File APIのオブジェクトについて紹介しました。今回から、実際にFile APIを使ってファイルの操作を行っていきます。各オブジェクトや関連性をひととおり把握してからの方が、頭にしっくり入ってきやすいのではないかと思います。これまでの記事を参照しながら、実際にコーディングを行い、weinreでデバッグしてみてください。 File APIを使ったファイル操作 ここからは順を追ってFile APIでファイルを操作する方法を紹介していきます。解説の流れは次のとおりです。 Camera APIを使って、TEMPORARYファイルシステムにファイルを作成 実際にファイルが作成されているかの確認手順 TEMPORARYファイルシステムのファイル一覧を取得し、画面に表示 ─requestFileSystemメソッド, FileSystemオブジ
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
CanvasとFile APIとWeb Workersを組み合わせて画像にフィルタをかけてみた | _iLTdiwn
CanvasとFile APIとWeb Workersを組み合わせて画像にフィルタをかけてみた Posted by tatat on 2011/01/09 09:25 Categorized as JavaScript Comments (0) A「彼女が欲しいです。」B「それ、html5でできるよ。」 という程度にはhtml5周辺おもしろいです。 今回はCanvasとFile APIとWeb Workersを組み合わせて画像にフィルタをかけてみました。デモは下の方にあります。 はい、とりあえずFile APIです。今回はFileReaderを使うのでブラウザが対応しているかどうかはこんな感じで確認できました。 if(window.FileReader) { // 対応してる } else { // 対応してない } 画像を読み込んで表示するときの簡単な使い方はこんな感じです。 win
もっともっとFile APIを使ってサーバ側で受け取ってみる | @blog.justoneplanet.info
前回の記事に以下の質問がありました。 質問なのですがバイナリデータはsendでは送れないのでは？ 自分も同じようなことをしているのですがFireFox限定のsendAsBinaryでないと無理でした。 どのようにして転送してるのでしょうか？ えーと。。。(･Θ･;)。。。あの、その。。。うかれててサーバ側を考えてませんでした。すみませんm(_ _)m ■クライアント側のコード 前回のコードとおなじ。 function dragStart(e){ //e.preventDefault(); } function dragEnter(e){ //e.preventDefault(); } function dragOver(e){ e.preventDefault(); } function drop(e){ var files = e.dataTransfer.files; for(var
jQuery File Upload Demo
jQuery File Upload Demo File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads. Pintura
File APIでJavaScriptからローカルファイルをいじる
<script> window.onload = function() { document.getElementById("sakuSubmit").onmouseup = function(){ var upFile = document.getElementById("sakuFile"); var num = upFile.files.length; for(var i = 0;i<num;i++){ var txt = 'name : ' + upFile.files[i].name + "\n" + 'size : ' + upFile.files[i].size + "\n" + 'type : ' + upFile.files[i].type + "\n" + 'urn : ' + upFile.files[i].urn + "\n"; alert(txt); } } }
Netforest Developer's Note - HTML5 Drag and Drop APIとFile APIのデモ
take©です。 まずはこれをみていただきたい。 Amazing! ブラウザにドロップした画像ファイルの内容が表示されているではないですか。 さらには、テキストファイル、動画ファイル、Webページのサムネイルまでドラッグ＆ドロップで表示できています。 ついにここまで来たんですね。 元ネタはこれ。 モジラのHacks Blogで公開されたDrag and Drop APIとFile APIを使ったデモです。 http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/ (元記事) http://demos.hacks.mozilla.org/openweb/DnD/ (デモ) このデモはFirefox 3.6 betaが実装したHTML5の新しい規格、Drag and Drop APIとFile APIで実現されていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Implement File Uploading in Angular Reactive Forms
MURAL
CanvasとFile APIとWeb Workersで画像フィルタDemo
ある1つのサンプル
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
