Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
Plaiceholder
plaiceholder@3.0: Final Release The plaiceholder project is feature complete and will now be kept in maintenance mode. Read the migration guide for further information. If this project has been useful to you, please consider sponsoring my work (opens in a new tab). Overview "Plaiceholder" is a suite of server-side functions for creating low quality image placeholders (LQIP). There is no "one-size-
React+Canvasで画像コントロール - Qiita
はじめに 以前に投稿したCSSで写真コントロールUIを作るをさらに改良して、 画像をズームしたり、マウスドラッグで動かしたりできて、さらに画像のピクセル座標を取得するUIを作成した。 前回はreact/reduxのスタイル制御で実装したが、 今回はマウスでクリックした位置にピンを立てたりといった、 より複雑な画像コントロールを実現するため、 canvas内包のreactライブラリであるreact-konvaを使ってみた。 react-konvaを使うメリット 普通にcanvasを使うより断然簡単！ これは他のCanvas内包ライブラリも同じかもしれないが、 画像操作の実装が格段にしやすくなった。 前回の投稿のようにスタイルを操作する時の苦労から解放された。 画像のズームやドラッグをする際は、width, height, 画像の位置を示すx, yを操作すればいい。 これらのパラメータをsta
JavaScriptで画像処理するなら「Jimp」が便利 | 綺麗に死ぬITエンジニア
現在JavaScriptは、ブラウザで使用されるのはもちろんのこと、サーバーサイドでWebサーバーとして動作したり、はたまた開発者のPCで各種開発ツールとして動作したりしており、様々な場面で利用されています。 そこで今回は、そのどちらでも使える、Node.jsとブラウザJavaScriptの両方に対応した画像処理ライブラリ「Jimp」を紹介したいと思います。 「Jimp」とはJimpは、外部またはネイティブの依存関係が全くない、完全にJavaScriptで記述されたNode.js用の画像処理ライブラリです。ライセンスはMITライセンスで、オープンソースで開発されています。 以下のnpmコマンドでインストールできます。 var Jimp = require("jimp"); // "lenna.png"を開く Jimp.read("lenna.png", function (err, len
いい感じに画像をリサイズしてくれる React Component を作ってみた - Qiita
こんな感じで画像の縦横比を変えずに指定したサイズにリサイズする React Component を作りました。 横長画像の場合 縦長画像の場合 画像の長辺を枠に合わせ縦横比を変えずに画像全体が枠内に収まるようにリサイズするものです。 画像の縦横比を保ったままのリサイズは object-fit や backgound-size でも可能ですが、 IE で対応してなかったり背景画像でしか使用できないので自作しました github: https://github.com/sottar/react-image-resizer github の README にもありますが、使い方は簡単で画像のパスとリサイズ後の width, height を指定するだけでリサイズされたの画像を返してくれます。 画像取得できなかった場合（主に404を想定）用の画像パス noImageSrc や、画像にstyle を
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
【Canvas練習ノート】CanvasをPNG画像ダウンロード – toBlobとsaveAs
canvasをPNG画像へキャプチャしダウンロード。 PNG画像へのキャプチャは canvas.toBlob を使います。 ダウンロードは FileSystem API で行います。 canvas.toBlob HTMLCanvasElement のメソッド toBlob は Blobオブジェクト（画像）を返してくれます。 ただ残念なことに Firefox しかサポートしておらず、polyfill メソッドを用意する必要があります。 w3c: File API#blob stackoverflow: Which browsers (and versions) support the Canvas.toBlob method? MDN: HTMLCanvasElement Example: Save toBlob to disk with OS.File (Chrome Context On
[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
タッチデバイスに対応したフリーのLightbox・スライドショーjQueryプラグイン
【Swipeshow】スワイプで操作できるjQu... / 【Liquid Slider】スマートフォンのタ... / 【Sly】スライドショーとしても使えるタッチ操作...他...全6件
計量学習を用いた画像検索エンジンとアニメ顔類似検索v3について - デー
まだgithubにはpushしていないのですが、さいきょうの組み込み型画像検索エンジンotamaに計量学習を用いて与えられたデータにあった画像間の距離関数を学習してそれを使って検索するというドライバを入れたので、先行的なデモとしてアニメ顔類似検索v3を作ってみました。 計量学習は、ベクトル間の距離の計り方を機械学習で決めるみたいな分野です。 アニメ顔類似検索v3 AnimeFace Search v3 - Otama LMCA_VLAD_HSV Driver randomボタンを押すと顔画像がランダムに出るのでどれかクリックするとそれをクエリに検索します。color weightは色の重みを調節するパラメーターで、1にすると色だけで検索します。0にすると形状やテクスチャだけで検索します。結果画像の上の数字は類似度的なもので、その横のgglは元画像をGoogle Search by Imag
『javascriptで画像処理してみよう(1)〜OpenCVjs〜』
画像処理だけで飯が食えるかっ！？ 主にコンピュータ関連の話題中心にしていこうかと思ってますがどうなるかは不明です。 写真の加工や顔認識といった画像処理の話題が多くなるかと思います はじめまして。京都の会社で画像処理エンジニアをしてますsakiyamaKです。 いつからかinstagramとかで写真をお洒落に加工するフィルタが流行りだして、ずっと興味があったので自分のプログラムで再現できないかと調べてみました。 で、一応コツがつかめる程度には再現できたんですが、いかんせん画像処理といえばC言語系でやるのが普通です。でもそれだとウェブ系の人たちにウケが悪そうだなと思ったんで、まずjavascriptの画像処理ライブラリを作ってみました。 名づけてOpenCVjs！ 名前の通り画像処理ライブラリのデファクトスタンダードであるOpenCVのjavascript移植版です。 せっかく作ったんで誰かに
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
Rubyでバーコードスキャン·Ruby Barcodescanner MOONGIFT
Ruby BarcodescannerはRuby製のフリーウェア（ソースコードは公開されている）。携帯電話にはカメラがついているので、外で写真を撮るのも手軽だ。そうした外部の情報をアップロードして楽しむサービスは数多い。書籍のバーコードを使って楽しむサービスも面白い。 実行した所 携帯電話自体にバーコードスキャナーの機能があればそのまま使えるが、それがない場合は別途連携を考える必要がある。例えばRuby Barcodescannerを使ってみると良いだろう。Ruby Barcodescannerは画像を読み込んでバーコードスキャンを行うRubyライブラリだ。 元になるのが画像というのが良い。写真やスキャナーで取り込んだ画像をそのまま利用できる。画像の取り込みにはImageMagickを使い、実際のスキャンはzbarというオープンソースのバーコードライブラリを使っている。Ruby Barco
HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・droparea
Gmailライクにローカル環境からブラウザに ドラッグ&ドロップで画像をアップロード可能 にするHTML5+jQuery製のアップローダー droparea。今後、こうしてキーボードを使う 頻度が減っていくんですかね・・HTML5の 出現で一気に加速した印象ですね。 jQuery HTML5 UploaderやjQuery File Uploadの後発に当たりますね。 イメージアップローダーです。Gmailライクにドラッグ&ドロップでアップロード出来ます。 コードs = { 'init': m.init, 'start': m.start, 'complete': m.complete, 'instructions': 'drop an image file here', 'over' : 'drop file here!', 'nosupport' : 'No support for t
GitHub - mezzoblue/PaintbrushJS: A lightweight browser-based image processing library
PaintbrushJS Copyright (c) 2010, Dave Shea All rights reserved. Developed by Dave Shea, http://www.mezzoblue.com/ PaintbrushJS on GitHub: http://github.com/mezzoblue/PaintbrushJS PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page. You use it by applying a class to an element on the page and setting a few parameter
CentOS5.1にRMagickを入れる方法 - このブログは証明できない。
Railsだとfile_columnプラグインを使うと、画像のアップロードとサムネイル表示を簡単に実装することができます。file_columnは、内部でRMagickを使っています。RMagickはImageMagickという画像処理ライブラリのRuby版インターフェイスです。 file_columnで画像アップロードとサムネイル - このブログは証明できない。 上のエントリではFedora7を使っていたので、何の問題もなくインストールすることができました。ところが、CentOS5.1にRMagickを入れようとしたところ上手くいきません。今回は、CentOS5.1にRMagickを入れる方法。 こちらの記事を参考にすればいいだけなのですが。 no title 要は、RMagick2はImageMagick6.3.0を必要とするのに、CentOS5.1のリポジトリだとImageMagic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ShiqiYu/libfacedetection: An open source library for face detection in images. The face detection speed can reach 1000FPS.
https://matcha-choco010.net/2018/09/26/%E7%94%BB%E5%83%8F%E3%82%92%E4%B8%80%E6%8B%AC%E3%81%A7%E5%9C%A7%E7%B8%AE%E3%81%99%E3%82%8Bcli%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/
GitHub - jimp-dev/jimp: An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
はてなブログ | 無料ブログを作成しよう
