render hooks パターンの素振り
以下の記事で紹介されている「render hooks パターン」がすごく良いなと思ったので、実際に業務で利用した構成を元に実装してみました。 最終的な実装 画像ファイルを指定すると、直下に画像のプレビューを表示するコンポーネントを作りました。 こちらを元に解説していきます。 パターンを使わない実装 以下はカスタムフックを利用せずに実装した例です。 <input type="file" />に入力があったのをhandleInput()で画像を data URL に変換しています。 import { useState } from "react"; export default function App() { const [value, setValue] = useState<string | null>(null); const handleInput = (changeEvent: R
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
Node.js : POSTしたDataURL をファイルに保存 : typeOf 'aki_mana'
ファイルをアップロードという手法の他にも、クライアント（JavaScript）で生成した DataURL なデータをサーバー側でファイルに保存するというアプローチが考えられる。 DataURL な文字列を解析して、Bufferオブジェクトにし、それを WriteStream オブジェクトでファイル化 こんな感じで。 var parseDataURL = function( dataURL ){ var rslt = { mediaType : null, encoding : null, isBase64 : null, data : null }; if( /^data:([^;]+)(;charset=([^,;]+))?(;base64)?,(.*)/.test( dataURL ) ) { rslt.mediaType = RegExp.$1 || 'text/plain'; rs
[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)
ディレクトリ内のファイルを列挙する | まくまくNode.jsノート
ディレクトリ内のファイルやディレクトリを列挙する（一階層のみ） Node.js の標準モジュールである fs モジュールの readdir() を使用して、指定したディレクトリ内のファイル、ディレクトリを列挙することができます。 fs.readdir function 見つかったファイル群は、コールバックの第 2 引数に配列の形で渡されます。 ドット (.) で始まるファイルやディレクトリは検索対象になりますが、カレントディレクトリ (.) や、親ディレクトリ (..) は結果に入りません。 下記は、カレントディレクトリ内のファイルとディレクトリを列挙するサンプルです。 sample.js var fs = require('fs'); fs.readdir('.', function (err, files) { if (err) { console.error(err); } else
【Android】外部から取得した画像をデコードする時に気をつけること - Qiita
APIなどを叩いて外部から取得した画像データを利用する場合、エラー等のデコードできない可能性や大きすぎる画像である可能性などを考慮する必要がある。 かなり大きな画像をデコードしてしまうと、Out of Memoryでクラッシュする可能性もあるため、直接ピクセルデータをデコードするのではなく、最初にサイズ情報のみをデコードし、必要なサンプリング数を設定してからデコードすることが必要になる。 こうしたことを考慮すると、以下のようなメソッドをutilメソッドとして定義しておき、使い回すのが好ましい。 fun decodeBitmapFromByteArray( data: ByteArray, @Dimension requestWidth: Int, @Dimension requestHeight: Int ): Bitmap { val options = BitmapFactory.Op
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tenpu
