- ベストアンサー
サムネイル画像の自動作成
ECサイトを運営してるのですが、知識に乏しいのでご協力願います。 画像を自動的に縮小する（サムネイル画像の生成）JavaScriptなどの サンプルをご存じでしたら教えてください。 例） 900px×900pxの画像に「id="resize"」など加えたら、 自動的にジャギーの無いアンチエイリアスのかかった 100px×100pxの画像になる。 Jqueryなどクライアントサイドでの動作するもので、 有償・無償は問いません。 不足事項があれば、分かる範囲でお伝えするので、 よろしくお願いします。
- kazuya88
- お礼率28% (38/134)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- annyG
- ベストアンサー率25% (10/39)
無理だと思います。 クライアントサイドにサムネイル作成のプログラムが必要ですし、そんなものがJavaScriptから実行できてしまったら大きなセキュリティホールになりますから。 Ajaxなどを使ってサーバーサイドで処理する方法もあるかもしれませんが、ページを開くたびにそんな処理が走ったらサーバーに負荷がかかりすぎますし、それだったら最初からサーバーにサムネイル用の小さな画像を作っておいておく方が遙かに簡単です。
お礼
ありがとうございました。
関連するQ&A
- サムネイルを作成するフリーソフトを探しています
こんにちは、よろしくお願いします。 商品の画像をずらっと並べたWebページを作ろうと思っています。 たくさんある商品画像に対してサムネイルを作るため、 ・一定のサイズ(縦横200px以内など)に縮小し、 ・中心点から上下左右に40px広げた80*80を切り出す というようなことをやりたいです。 上の画像のサイズは適当ですが、要は画像の縮小と切り抜きを一発でやりたいのです。 画像は100件以上あり、今後も増えるので、1つ1つ手で行うのは現実的ではありません。 縮小だけや切り抜きだけを行ってくれるフリーソフトは見つかるのですが、 どちらも行ってくれて、いくつものファイルをまとめて処理してくれる、というフリーソフトはありませんか。 どうぞよろしくお願いします。
- ベストアンサー
- 画像・動画・音楽編集
- フォトショップ・画像の拡大とカラーモード
Photoshop Elements 3.0を使っています。 作った画像(かなり細かいもの)を20×30cmに拡大したのですが、かなりジャギーが目立ってしまいました。 ・Tシャツプリントに使うものなので縮小はできません。 ・もとの大きさの画像は残っていません。 選択範囲をアンチエイリアスにしてみたのですが、線が太くなって細かい模様が潰れてしまいました。(やり方がよくわからなかったので間違っていたかもしれません) どうしたらエッジを滑らかにすることができるでしょうか？ カラーモードをCMYKにしたいのですが、ElementsはCMYKに対応していません。 フリーソフトでCMYKにできるものはありますか？ 時間がないので回答お願いします。
- ベストアンサー
- その他(ソフトウェア)
- Jqueryを使って画像サムネイルにロールオーバーしたときに、半透明の
Jqueryを使って画像サムネイルにロールオーバーしたときに、半透明の画像と情報を載せたいと思っております。 WPを利用しているのでサムネイル一覧は自動で生成されます。 サムネイルを生成している上に半透明のpng画像を背景にした情報セットをPositionで載せるところまでは完成しています。 jqueryで上に載る情報をまとめたCSSにdisplayを追加させることでロールオーバーもできました。 ですが、自動生成している一覧のclass名が全て同じなため、サムネイルの一つにマウスを合わせると全ての画像が反転してしまいます。 どうしたら、マウスを合わせた画像のみロールオーバーできるようになりますか？ よろしくお願いいたします。 【JSソース】 $(function(){ $("li.item dl dt.thm").mouseover(function(){ $("li.item dl dt.thm a.overImg").css("display","block");}); $("li.item dl dt.thm").mouseout( function() { $("li.item dl dt.thm a.overImg").css("display","none");}); }); 【HTML】 <ul class="lists"> <li class="item"> <dl> <dt class="thm"> <a href=""><img src="～～ /></a> <a href="" class="overImg"> <span class="name01">タイトル</span> <span>サイズ</span> <span class="date">日付</span> </a> </dt> <dd>>情報１</dd> <dd>情報２</dd> </dl> ～～～ </ul> 【CSS】 .lists .item .thm{ position: relative; height: 100px; width: 150px; margin: 0 0 10px 0; border: 1px solid #ebebeb; -moz-box-shadow: 2px 2px 5px #cccccc; -webkit-box-shadow: 2px 2px 5px #cccccc; } .lists .item .thm a.overImg{ position: absolute; background: url(../images/thumbnail_over.png) no-repeat right bottom; height: 80px; width: 130px; left: 0px; top: 0px; padding: 10px; display: block; text-decoration: none; display: none; } .lists .item .thm a.overImg span{ font-size: 11px; display: block; width: 130px; margin-bottom: 5px; color: #666666; text-shadow: #ffffff 1px 1px 3px; height: 15px; overflow: hidden; } .lists .item .thm a.overImg span.name02{ font-weight: bold; font-size: 14px; } .lists .item .thm a.overImg span.date{ position: absolute; leftt: 0; bottom: 0; }
- ベストアンサー
- JavaScript
- サーバ上にだけサムネイルを作らない方法は？
社内でクライアントPCとしてWindows7を使用しています。 自分のPC内の画像を見ることもあれば、Windows2008server内の画像を見ることもあります。 自分のPC内のファイル閲覧時には縮小画像を生成したいのですが Windows2008サーバ内の画像を閲覧するときには縮小画像を生成したくないのです。 （サムネイル「Thumbs.db」を生成したくない） そのようなことは可能でしょうか？ 自分のPC内の設定でフォルダオプションをいじると どちらにも影響してしまうようで、解決法がみつかりません・・・
- ベストアンサー
- その他(Windows)
- Photoshopで、画像を2値化したのち、RGBに戻して、K100%
Photoshopで、画像を2値化したのち、RGBに戻して、K100%の部分に色を付ける作業をしたいのですが、このとき画像を移動ツールで少しでも回転させると、自動的にアンチエイリアスがかかってしまい、2値でなくなってしまいます。 RGBモードで2値化を維持したまま、回転したり縮小したりする方法（アンチエイリアスがかからない方法）はないでしょうか？ レイヤーの描画モードのディザ合成が近いのかな？と思ったのですが、正確な方法が知りたいので、どうぞよろしくお願いします。
- ベストアンサー
- グラフィックソフト
- Webページのサムネイル生成がうまく出来ません
Webページのスナップショットを取得し、その画像を縮小してサムネイル生成をするサンプルプログラムが下のサイトで紹介されています。このサイトのソースプログラムをいじって、外部クラスから複数のURLと生成されるサムネイルの画像の名前を一つずつそのプログラムに渡していき、生成された画像データを保存していくようにしようとした所、最初に渡したURLから生成されたサムネイル画像はちゃんと画像になって保存されているのですが、それ以降のURLから生成された画像は真っ白になっていたり、エラーが出たりと、色々いじってみたのですがうまくいきません。どのように書き換えればいいのでしょうか？ サイトのURLは http://blog.flup.jp/2007/07/03/web_thumbnail_java_intro/ http://blog.flup.jp/2007/07/04/web_thumbnail_java_2/ http://blog.flup.jp/2007/07/04/web_thumbnail_java_extra/ ソースコードは http://blog.flup.jp/CaptureBrowser.java http://blog.flup.jp/ImageSaver.java
- ベストアンサー
- Java
- 投稿画像のサイズを調整をしたい
bloggerを利用しています。 画像を投稿すると、ある一定のサイズに自動的にリサイズされてしまい困っております。 例えば... 400pxの画像を投稿すると自動的に200pxにリサイズされます。また、100pxの画像を投稿するとそのまま100pxで投稿されます。（数値は分かりやすい任意の数です） そこで、リサイズされる画像のサイズを200pxではなく300pxにしたいのですが、そのやり方が分からなくて困っています。 これまで試した事... imgタグのwidthを300pxに指定したところ、著しく劣化した300pxの画像になりました。 どのタグをどのように書き換えれば画質を劣化させずに画像のサイズ調整ができるのか教えていただきたいです。 よろしくお願いします。
- 締切済み
- ブログ
- 画像を自動でサムネイル表示してくれるファイル管理ソフト
いろいろとファイル管理ソフトを試しているのですが、 なかなかWindows標準のエクスプローラから乗り換えたくなるものが見つかりません。 OSはWinXPhomeを使っているので、 エクスプローラで画像がたくさん入ったフォルダを開くと 自動的に縮小版表示(サムネイル)に切り替えてくれます。 こういう機能も含めて、 エクスプローラでできることを全て網羅しているファイル管理ソフト(ファイラ)を探しています。
- 締切済み
- フリーウェア・フリーソフト
- jQueryで画像の幅と高さをリサイズする方法
jQueryでサイズが異なる画像の幅と高さをリサイズするのに、非常に困っています。 XMLもしくはJSONで複数画像をサーバーサイドから取得します。その画像の条件は、幅サイズは異なるのですが、高さは一定です。仮に高さを140pxとします。 要件を簡単に述べると、 Webサイトの画⾯幅が900pxとした場合に、画像をその幅にきっちり収まるようにしたい。（1pxや2px程度の空きがでても良い） きっちり収めるためには、画像のリサイズを行わなければならないのですが、各行毎の画像の高さは一定とする。（一行目と二行目の高さは異なってよい。） という感じになっています。 そのリサイズ方法ですが、 画⾯の横幅に取得した画像の先頭から何枚収まるか算出しなければなりません。 仮に以下のような画像の横幅とします。 1枚目:180 2枚目:240 3枚目:120 4枚目:80 5枚目:1000 6枚目:600 7枚目:300 8枚目:500 9枚目: 10枚目: ・ ・ ・ これらの画像横幅を足すと 180 + 240 + 120 + 80 + 1000 = 1620 となるため、画面幅の900を超えてしまいます。 そのため4枚目までしか画面幅に収まりません。なので4枚目までの画像幅を足します。 180 + 240 + 120 + 80 = 620 900(画面幅) ÷ 620(幅総数) x 140(画像の規定高さ) = 203(切り捨て) となり、その行に納まる4枚の画像の高さを203pxにして、それに併せて4枚の画像の幅サイズをリサイズします。 1枚目の画像の場合： 180 × (203 ÷ 140) = 261 2枚目の画像の場合： 240 × (203 ÷ 140) = 348 としていくと、4枚の画像の幅総数が899となり画面幅に収まります。高さは4枚すべて203pxです。 5枚目が1000と900を大幅に超えていますので、この場合以下のように高さをだします。 900 ÷ 1000 × 140 = 126 1000 × (126 ÷ 140) = 900 として幅900px、高さ126pxとリサイズします。 という具合に6枚目、7枚目、8枚目の画像の幅総数が900以内として、 すべての画像のそれぞれ高さと幅をリサイズしていきます。 こういった場合に、画像それぞれの幅を見て、画面幅の収める枚数の画像を決めて、 上記のような条件でリサイズしていけばよいでしょうか。 何卒、力添えをお願い致します。
- 締切済み
- JavaScript
- Fireworks CS3で画像を縮小すると荒くなるのはなぜ？
FireworksのCS3を使っています。それの画像縮小についておしえてください。 JPGなどの拡張子の画像をFireworksで縮小しようとすると、何故か画像が非常に荒くなってしまいます。 やり方としては、 1.Fireworksを立ち上げる 2.JPG画像をFireworksにドラッグする 3.「修正」→「変形」→「数値を入力して変形」とすすむ 4.任意のサイズ（縮小に限る）にして確定 というオーソドックスなやり方だとは思うのですが、画質が非常に荒くなってしまいます。縮小方法には、他にもいろいろやり方がありますが、どれも同じ結果でした。 もし拡大して画像が荒くなるのなら仕方ないと思うのですが、縮小して画像が荒くなるのはどうしても何とかしたいです。 もしかすると、設定か何かでアンチエイリアス処理がなされていないために荒い画像になるのではないかと思いましたが、アンチエイリアスのチェックボタンは拡大・縮小の時にはプロパティには表示されません。 ということで、どなたか分かる方いれば是非教えていただけませんでしょうか？よろしくお願いいたします。 バージョン： Fireworks CS3 ver9.0.1.1213 ウィンドウズ版
- ベストアンサー
- グラフィックソフト
お礼
ありがとうございました。