• 締切済み

JAVASCRIPT：画像処理

JAVASCRIPTを使った画像加工について教えてください。 一枚の顔のイメージを表示してクリックすると、口角があがったり、笑った目にしたり、眉毛をあげたりすることができるようなアプリを考えています。 なにかヒントをください。 宜しくおねがいします。

みんなの回答

回答No.3

Operaの<canvas>のみ画像のピクセルごとの色情報を取得できますので、 各色情報を取得して変形させるように表示し直せばいいでしょう。 ただし、非常に遅いです。 それ以外のブラウザはJavaScriptだけではできませんので、 JavaScriptでクリックした位置などの情報をサーバーに送り、 サーバー側で変化させた画像を改めてダウンロードし、表示するという感じになると思います。 サーバー側はC系言語でつくればlibpngやlibjpegなどのライブラリを使って画像の読み込みもできますし （PerlやPHPでもできると思いますが、もともとテキストデータを扱うための言語ですので、処理が遅いなどの影響が出るかもしれません） 画像全体への処理（輝度や色相調整など）であれば、ImageMagickなどのライブラリを使えば、ライブラリが肩代わりしてくれます。 ImageMagickはPerlやPHP用のライブラリもありますので、画像の読み込みはできると思います。 アルゴリズムはC++での解説になりますが、MSDNなどが詳しいと思います。 http://msdn.microsoft.com/ja-jp/academic/cc998604.aspx モザイクは雑音の応用、引き延ばしなどは移動、拡大の応用でいけると思います。 Flashを使った物で、画質調整やトリム、拡大、赤目調整のみですが。 http://www.photoshop.com/express/ （英語のみ、ベータ版）

shiryo26
質問者

補足

ありがとうございます！！ >JavaScriptでクリックした位置などの情報をサーバーに送り、 >サーバー側で変化させた画像を改めてダウンロードし、表示するとい >う感じになると思います。 とのことなんですが、これはAJAXを利用するということで良いのでしょうか？ 初心者ですいません。

noname#84373
noname#84373
回答No.2

自分で検索すべし。 keyWord ie javascript filter

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

＞JAVASCRIPTを使った画像加工 javascriptはブラウザの機能に依存してしまうため、 そのような用途にはあまり向いていません。 別の方法を検討なさったほうが賢明です。

shiryo26
質問者

補足

回答ありがとうございます。 一部にモザイクをかけたり引き伸ばしたりするのもできないのでしょうか？？ 読み込んだイメージに効果をもたせたいのですが・・・ 宜しくお願いします

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Javascriptでこんな処理できますか？

    初心者必見！JavaScriptでできることと作れるものってどんなもの？ https://www.sejuku.net/blog/3936 これをみるとJavascriptでできること WEBサイトに「動き」を加える 具体例1:HTML要素を追加 具体例2:CSSを変えて見た目を変更 イベント処理 JavaScriptは、マウスの動作やクリックされたという動作をイベントとして取得することができます。 そのイベントと紐づけて、いろいろな動作をつけることも可能です。 非同期通信 非同期通信を使ったアプリは、サーバーの応答を待たず次々と処理を行うことができます。 が出来るとききました。 そこで、 JavascriptでCSVの加工をする http://dripn-snip.com/2018/02/15/csv-js/ JavaScriptでCSVを扱うためには、5つのステップを経る必要があります。 1.ブラウザにCSVを読み込ませる 2.CSVをJavaScriptで扱える形式（配列）に変換する 3.配列を操作する 4.配列をCSVに戻す 5.ダウンロードする でのやり方のようにすれば、 自分のやりたい、 1.ブラウザに編集対象WEBサイトページを読み込ませる 2.ページ内テキストを取得し正規表現で取り出す。 3.取り出したテキストでーたからISDNコードを抽出し 4.Amazonで検索。検索結果を表示 こういう処理ももちろんできますよね？ 頭が悪いのですが、努力はしようと考えているのでやろうと思っています。 家にあった、Javascriptの入門書をみていたら正規表現などの軽い解説があるのと DOMの解説、基本的な文法の解説だけだったのでいまいちピント来ませんでした。 アドバイスよろしくお願いします。

  • javascriptでの画像表示について

    javascript初心者です。 画像を一つランダムに表示させ、それをクリックしたらその画像は隠れ、新たに複数枚画像を表示させるプログラムを作りました。 これに、最初の画像をクリックしたらストップウォッチを表示し起動させ、新たに表示された複数枚の画像の中から最初(クリック前)の画像と同じものをクリックしたらストップウォッチが止めるようにしたいです。 jqueryは使用していません。どうすればよいかアドバイス頂けませんでしょうか。

  • クリックしたらJavaScriptで数カ所に一度に画像を表示させたい

    以下のようなことがJavaScriptでできるでしょうか？ できる場合、関数等のヒントをいただけないでしょうか。 webページにおいて、 「画像を表示」というリンク、あるいは同様のボタンをクリックすると、 同ページ内の複数の場所（特定）に、それぞれ指定した画像を一度に表示させる。 よろしくお願いいたします。

  • JavaScriptの画像入れ替えについて

    下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。 ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、 またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？ またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。 あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript"> <!-- function imgch(url) { document.getElementById("image").src=url; } //--> </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>

  • javascriptで画像を表示する

    javascriptで画像を表示した際に、表示したimgにCSSのidを付与したいのですが、以下のようにしても画像にidはつきませんでした。 document.write("<img src='images/image.jpg' id='example'>"); 一部の画像のみにスタイルを適用したいので、画像それぞれに異なるidを与えたいのですが、javascriptで表示させる場合のやり方がわかりませんでした。 どうやってidを割り当てるのか教えてください。 よろしくお願いいたします。

  • JavaScriptについて

    サイト作成中なのですが、JavaScriptのところでつまづいています。 ボタンをクリックすると別窓で画像が出てきて表示されるというJavaScriptを作ると、ボタンは表示されていたのですが、ボタンを押しても画像が表示されません。つまり押しても何も反応がありません。 恐らく画像の保存場所が違うのではないかとにらんでみたのですが見当違いかな？？ タグは以下の通りです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> function cl(){ popwin=window.open(",'img','width=150,height=150'); popwin.document.write('<IMG SRC="image3.jpg">'); } </SCRIPT> </BODY> クリックしてください。 <FROM> <INPUT type="button" VALUE="クリック" onClick="cl()"> </FROM> </BODY> </HTML> 私はここの部分で間違えてると思いました。 popwin.document.write('<IMG SRC="***.jpg">'); デスクトップに置いてるmyhomepageにimageというフォルダを置いてそこに画像を保存しています。 その場合、<IMG SRC="image/***.jpg">かなと思い実行してみましたがダメでした。。 JavaScriptのときは何か特別なファルダを作る必要が あるんでしょうか？？ JavaScriptに関しては最近はじめたばかりでチンプン カンプンなのでわかりやすく説明していただけるとありがたいです。 ちなみに上記のタグは説明本通り記載しました。 よろしくお願いいたします。

  • JavaScriptを埋め込むには？

    こんにちは。よろしくお願いします。 現在、JavaScriptの使用が禁止されているスペースで、HPを作成していますが どうしてもポップアップを使いたいので、JavaScriptの使用が可能なスペースで 画像をクリックするとリンク先にジャンプし、ポップアップが表示されるように作成しました。 そのURLを、JavaScript使用禁止のページの画像に埋め込んだところ 当たり前ですが、JavaScriptが埋め込まれた画像が表示され その画像をクリックしないと、リンク先ジャンプ＆ポップアップ表示されません。 JavaScript禁止ページの画像クリック→リンク先ジャンプ＆ポップアップとするには どのように作成すれば良いでしょうか？ JavaScriptに関して、全くの初心者なもので、分かりづらい説明ですが どうぞ、よろしくお願いいたします。

  • JavaScriptクリックした画像を変えたいです。

    JavaScriptで一度画像をクリックすると画像が変わりそのご画像をクリック できないようにするにはどうしたら良いでしょうか？ A画像をクリックするとB画像に代わりB画像はクリック出来ないように なります。 どうぞよろしくお願いします。

  • 画像がみれません。javascript～？

    最近パソコン使うようになったものです。賃貸情報のアパートの室内画像を見ようと「画像をみたい」をクリックしてもみれません。「画像をみたい」という部分をクリックして移動しようとすると javascript:Popup_PhotoViewer("/users/不動産屋の名前/ 数字","jpg","1","1)とでてきます。 画像をみるようにするにはどうしたら良いのでしょうか？

  • photoshopをjavascriptで自動処理

    photoshopをjavascriptで自動処理させたいと考えている者です。 photoshopで加工したい画像の多角形選択範囲におけるＸＹ座標と色（ＲＧＢ値）が画像それぞれ違います。 そこで、座標値とＲＧＢ値を変数化できないかと考えています。 例えば・・・ １、ダイアログを表示して、座標値やＲＧＢ値を入力できるようにする。それをjavascriptに反映させる。 ２、テキストファイル等に座標値やＲＧＢ値を保存させておき、javascriptに読み込む。 などを考えています。 私なりにインターネットで検索してみましたが、良い解決方法が見つかりませんでした。 是非よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する