(Google+)38この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。駆使して一枚の画像ファイルから色情報を取得する方法を学んでみました。学習の途中ではありますが、画像ファイルからカラーパレットを生成するところまでは出来るようになったので、当ブログで紹介するとします。思ったのですが、このシリーズにしては結構難易度の高い内容なので、いきなりその方法を紹介する前に、ここでは基本的なピクセルの操作や色情報の扱いなど、前段階としての小規模なサンプルを紹介していきたいと思います。カラーピッカーを作る見出しだけを読むとしょっぱなから大それた印象を受けますが、マウスカーソル位置にあるピクセル情報を取得・解析して、そこから色に関する情報を画面側に表示するといった単純なものです。ベースにして適当に組んでみます。要素はピクセルでサイズを指定する必要があるので、明示的に高さと幅を指定します。要素にはその色コードを表示させます。要素を使えば事足りますが、それではピクセル単位での情報を取得することが出来ません。ピクセル単位での情報を取得できるので、まずはこれを実現するための準備をします。上に一行目で指定した画像ファイルと同じものが描画されているかと思います。dy)-Canvasリファレンスこれで下準備が整いました。使ってmousemoveイベントを拾い、マウスカーソル位置にあるCanvasの情報を取得して色情報を解析するという流れです。オブジェクトを取得しています。内のバイト列を扱うためのオブジェクトです。情報を配列として保持しているので、ここから色情報を取得することが出来ます。20行目以降は、その取得した情報を画面側に表示するための処理になります。picker)画像の上でカーソルをグリグリ動かすと、そこにある色情報が表示されます。グラデーションカラーを描画するためのメソッドが最初から用意されていますが、あえてそれを使わずに自前で描画してみるとします。物凄く地味な内容ですが、画像からカラーパレットを生成するためには、自前でグラデーションが描画出来るくらいの知識が必要なのです。情報を配列として保持していると先ほど説明しました。]こんな感じで4要素単位でズラ~っと配列で保持されているのをイメージしてもらえれば良いでしょう。コードは以下のようになります。xブラウザで確認してみると、なんとも幻想的(?)なグラデーションカラーが表示されているかと思います。このコードにもう一手間加えて、別のグラデーションに変えてみます。先ほどのコードに以下のように別のループ処理文を追記します。x18行目はRGBAのBすなわち青に関する色情報です。固定することで青系統の色に限定されました。16行目の赤と17行目の緑に格納する値のアルゴリズムを上記のように変えることで、暗い青から明るい青へのグラデーションが表現されます。ふんだんに使ったフルカラーというやつです。カラーパレットといった限定した色を抽出するには、フルカラーでは情報が余りに多すぎるため、色の数を大幅に減らす必要がある訳です。減色処理のアルゴリズムは色々とあるようですが、今回は短いコードで実現できる均等量子化法というのを試してみました。均等量子化とは、元画像での色分布を考慮せず単純に階調を落とす手法です。おとせば、色数は単純に半分になるという理屈です。ビットマスクで落とすことで実現できます。0x80;凄く適当ですが、イメージとしてはこんな感じです。ビット演算子(※ここでは論理積)を用いて階調を落としています。サンプルコードを書き換えてみました。x量子化処理の部分は、そのままだと荒っぽすぎるので調整を加えています。2)更に画像データに対しても減色処理を加えてみるとします。x減色処理前と処理後の画像を比較できるようにしています。色数に違いが出ているのが分かるかと思います。(Quontize)とはいえ、色数は減っているものの、同時に画質の劣化が激しいです。そのためファイルサイズ圧縮のための手法としては殆ど使われることがありません。カラーパレットを生成するための手段としても、ループ処理で1ピクセルずつチェックしていくというのは、あまりに処理が重すぎます。今回はあくまで実験として試みました。そんな訳で、後編では別のアプローチでカラーパレットを生成する方法を紹介したいと思います。1,344,745目覚めてみるとそこには誰の姿もなかった。昨晩飲んだらしいウィスキーのグラスだけがテーブルの上に残っていた。僕はそれをビートルズ中期のジョン・レノンのような虚ろな目で眺めた。誰も僕を責めるわけではないし、誰も僕を憎んでいるわけではない。それでもみんなは僕を避け、どこかで偶然顔を合わせても最もらしい理由を見つけてはすぐに姿を消すようになった。僕はいま自分の置かれている立場に名前を付ける必要があった。フロントエンド・エンジニア僕は口に出して呟いた。悪くない格言のようにその言葉は一人の部屋に響いた。僕はていねいに時間をかけて六本の鉛筆をナイフで削り、そして全く使い道のない鉛筆を机の端に並べてからパソコンの電源を入れた。「ブログを書こう」ゆっくりと立ち上がったその瞬間に、後ろから僕を呼ぶ声がした。プロジェクトリーダーの声だ。熟練の山師が鉱脈を探し当てるかのように、その声には淀みがなかった。僕はパスルのピースをはめるかのように次の新しい案件にアサインされるのだ。「やれやれ」と僕は呟いた。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。〜ITエンジニアのお仕事とホンネ〜1月30日に新卒向けの会社説明会〜ITエンジニアのお仕事とホンネ〜を開催します。濱田孝治80EKS初心者の方向けに、EKS周辺のAWSリソースがどのように関連して動作しているのかをステップバイステップでEKSCTLが担っている役割を中心に説明しました。菊池修治45こんにちは、菊池です。VPNの冗長化について、最近何度か続けて社内で質問を受けましたのでまとめようと思います。大前諒祐26MediaLiveでの配信終了時に自動でアーカイブファイルをMediaConvertで変換する仕組みを作ってみました。武田隆志1179このエントリは、2018年、2019年に公開したAWS全サービスまとめの2020年版です。これまではいくつかに分割して公開していましたが、1エントリにまとめてほしいという要望をもらっていたため、今年は1エントリに集約してみました。クラスメソッドの関連会社であるアノテーション株式会社の研修として依頼を受け、チームと心理的安全性、それに礼節というテーマで話をしてきました。CAFEのサービスが「LINEアプリ」として利用できるようになりました。これまではLINEのトークから利用する形でしたが、LINEサービス内から利用できるようになりました。これまでより便利に、シームレスにご利用いただけます。Cafe328件のシェア(そこそこ話題の記事)インフラ未経験の私が内定から入社までに読んだ技術書11冊ブログ記事2020年01月16日Yui328インフラ未経験で入社した私がインフラを勉強するために読んだ技術書11冊を感想とともにまとめました。濱田孝治272「ふわわぁ、眠いな。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。