As of v4.0.0, the core code of Cropper is replaced with Cropper.js. I recommend you to use the jquery-cropper instead of Cropper. ×
As of v4.0.0, the core code of Cropper is replaced with Cropper.js. I recommend you to use the jquery-cropper instead of Cropper. ×
こんにちわ、アプリケーション基盤チームの青木(@a_o_k_i_n_g)です。好きなみかんは紅マドンナです。 今回は、サイボウズのサムネイル事情について記事を書きたいと思います。サイボウズに限らず通常の Web アプリケーションでもサムネイル作成はよくあると思いますが、ハマりどころが多く涙しているサムネイリストも多いかと思います。これからの時代を生きるサムネイリストが快適なサムネイルライフを送れるよう、知見を共有したいと思います。 弊社では画像変換ツールに ImageMagick を用いており、従って本知見は ImageMagick 固有のものがほとんどです。 画像比較は人間の眼で行うべし サムネイル周りに何か修正を入れたら修正前後の画像を比較しましょう。機械によるバイト列の比較では画像の良し悪しがわかりません。頼れるのは人間の眼だけです。肉眼で確認しましょう。 比較できるツールを作ると良
Sending and Receiving Binary Data https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data 場所変わったので↑https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data 「JavaScript バイナリ」でググっても古い情報ばかり見つかるので、ついカッとなって勢いで翻訳しました。 多分精度は低いのでおかしい所は指摘を頂けると嬉しいです。すぐ直します、恥ずかしいので。 初めに追記 (2013/04/27) 本家の方に翻訳文を移しました。↓こちらの文章の方が精度が高いのでお勧めです。 バイナリデータ
画像を包括したコンテナに その画像がぴったり収まる ようにサイズを調整する、 というjQueryプラグイン。 必要になるか分かりません が、需要はありそう。 コンテナ一杯に画像を表示させる、というもの。 上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src ="imgLiquid-min.js" type="text/javascript"></script>コアとプラグインを読み込みます。 $("
Jcropは画像を四角くクロップするjQueryプラグインです。 写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。 はい、まずは普通の表示です。マウスで範囲指定します。 こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。 正方形に限らず形を決められます。 コールバックにも対応していて、マウスを動かしたタイミングなどが座標付きで取り出せます。 サムネイルビューにも対応しています。範囲指定した部分が小さくなって右側に表示されています。 範囲を大きくしたらサムネイルが自動調整されています。 CSSを使って決められた範囲だけクロップ表示することもできます。 サーバサイドに飛ばしたところです。PHP+GDのスクリプトサンプルも用意されています。 Jcropはサーバサイドに座標を飛ばせるの
Sample database design for Users. Users Contains user details username, password, email, profile_image and profile_image_small etc. CREATE TABLE `users` ( `uid` int(11) AUTO_INCREMENT PRIMARY KEY, `username` varchar(255) UNIQUE KEY, `password` varchar(100), `email` varchar(255) UNIQUE KEY, `profile_image` varchar(200), `profile_image_small` varchar(200), ) <?php include('db.php'); session_start();
機能・概要 フリースクリプト PHPで作成したカレンダー。 イメージタグで呼び出して表示しますので、既存のページに1行書き加えるだけで設置できます。 イメージ表示なのでテーブルタグなどでHTMLソースが汚れません。 休日・カラー・他、各種設定が可能です。 各種設定はイメージタグで呼び出す際、パラメータを与えることで設定できます。 GDライブラリがサーバーにインストールされている必要があります。 PHP4.4.xで動作確認。 サンプル ダウンロードファイル ダウンロード前にご利用規約をご一読ください。 image_calender1.01.zip 設置 zipファイルダウンロード。 解凍(展開)。 次項の通り(解凍後の構成そのまま)でサーバー上の任意のディレクトリにアップロード。 次項の通りパーミッションを設定。 gdcheck.php にアクセス。Status: OK と表示されれば設置続
Ajax Image EditorはWebベースの簡易的な画像加工を行うWebアプリケーション。 Ajax Image EditorはPHP/Java/ColdFusion製、Webベースのオープンソース・ソフトウェア。世の中はどんどんWebアプリケーション化を進めている。メールだけでも衝撃的だったが、今やそれすら見劣りするくらいにリッチなUIで多機能なWebアプリケーションが存在する。 画像の回転 その一つが画像編集という分野だ。Adobeも画像編集を行うWebアプリケーションを開発しており、ローカルアプリケーションと殆ど変わらないくらいに便利なものも登場している。オープンソース・ソフトウェアでも同様で、Ajax Image Editorがある。 Ajax Image Editorはペイント等の画像編集ではなく、画像を回転したり切り抜いたりと言った画像加工が出来るWebアプリケーションだ
Programmeringsspråket PHP Enklast beskrivet så är ett programmeringsspråk, programspråk, ett språk som människan nyttjar sig utav då de skapar program eller system för datorer. I dagsläget så finns det ett hundratal olika vilka alla skapats för olika ändamål och används för att uppnå olika sorters syften. Somliga utav dessa är mer besläktade med varann än vad andra är som i sin tur skapats enbart
ロールオーバーで画像を変更する際に使用するプリロード用のjQueryを使用したスクリプトを紹介します。 Preloading Images with jQuery and JavaScript ロールオーバー時に表示する画像をその都度ダウンロードして表示すると時間のギャップが生じます。その時間の遅れを避けるために、画像を事前にバックグラウンドで読み込みます。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length;
by Russell Heimlich (@kingkool68) 600x400/000/fffSize / Background Color / Foreground Color . Format & Text DocumentationSizewidth x height Height is optional, if no height is specified the image will be a square. Example: https://dummyimage.com/300Must be the first option in the urlYou can specify one dimension and a ratio and dummyimage will calculate the right value. Example: https://dummyimage
<div id=shbase> <pre name="code091220115720" class="brush:js"> <div id="flashcontent"></div> <script type="text/javascript"> var flashvars = {xml:"loadImage.xml"}; var params = { allowScriptAccess:"always" ,bgcolor:"#ffffff" ,allowFullScreen:"true" }; var attributes = { id: "id_sample", name: "id_sample" }; // "?reload="+(new Date()).getTime() はキャッシュ対応です swfobject.embedSWF( "Main.swf?reload="+(new
馬鹿全 馬鹿なことでも全力でやってみるサイト。Flash, Flex, Action Script, Java Script, perl, php, 色々。 そもそも、そんな機会があるのだろうか?という疑問があるが、ちょっと仕事でそんな場面に出くわしたので 一応、俺なりに調べてみた。 今回は主に Flex に Flash CS3 の SWF を Embed することについて書くことにする。 Flex で SWF を Embed する方法は主に以下の二つ。 MXML 上で Image を使って source=”@Embed(source=’hoge.swf’)” みたいに書く AS ファイルや MXML の Script のところなどで、[Embed(sourc = ‘hoge.swf’)](以下で記述する)みたいに書く Embed した時に SWF ファイルの root を取得する方法
「写真素材 足成」は、全国のアマチュアカメラマンが撮影した写真を、写真素材として無料で提供しています。個人、商用を問わず全て無料でお使い頂け、その上、煩わしいクレジットやリンクの表記、ユーザー登録は一切不要。Web、紙、動画他、あらゆる媒体で写真素材としてのご利用が可能です。更新も365日毎日行っております!
Pebbleの管理画面でサムネイル作成を可能にするため、ちょっと調査してみました。 検証に使ったのは先週携帯で撮った霧のサンフランシスコ。 1600x1200でサイズは380kb。 このサムネイルは iPhoto で作成したもの。 綺麗な縮小画像を作るにはAreaAveragingScaleFilterを使うのがキレイ!って情報がちらほらある。 どうやら内部的にAreaAveragingScaleFilter を使ってくれるっぽい BufferedImage#getScaledInstance() を使って実験。 直接 AreaAveragingScaleFilter を触るよりコード量が少なさそうなので。 (1)コードはこんな感じ private static void scaledInstance() throws Exception { int height = 240; int w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く