javascript/canvasを使った画像拡大

前へ 次へ
このQ&Aのポイント
  • javascript/canvasを使った画像拡大。マウス操作によって画像を拡大する機能を実装しようとしていますが、サンプルページと同じように動作しません。
  • サンプルページを参考にして同じようにファイルを配置しましたが、マウスと拡大画像の連動がうまくいかず、円が残像のように表示されます。
  • 全く同じファイルと構造で作成しているのに動きが異なるため、困っています。サンプルページと同じように動作する方法を教えていただけないでしょうか？
回答を見る
  • ベストアンサー

javascript/canvasを使った画像拡大

下のページを参考に、自分のウェブサーバーで再現しようと思い全く同じように作成したファイルを配置しました。しかし、サンプルページと同じような動きになりません。 添付した画像のようにマウスと拡大画像が連動して動かず、円が残像のように表示されます。 すべて全く同じファイルと構造にしているのに動きが違うので困っています。みなさんはサンプルページと同じように動きますか？ここをチェックしてみてという所があったら教えてください。 http://thosokawa.sakura.ne.jp/blog/2016/11/05/canvas%E3%81%AE%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E8%99%AB%E7%9C%BC%E9%8F%A1%E6%8B%A1%E5%A4%A7/ サンプルページ http://thosokawa.sakura.ne.jp/lab/01/ どうぞよろしくお願いします。

画像を拡大する

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

質問者さんのサイトをやってみました。 sample.jpeg sample_big.jpeg の読み込みが異常に遅いようで、 読み込みの完了前にすでに実行を開始している様子が 確認できました。 また、逆に画像をキャッシュに入れた状態で、 動作させると、正常にサンプルサイトのように動いたのも 確認できましたので、 この場合は、 画像の読み込みを監視して、終わってから 処理を開始することや、 そもそもの画像を軽量化して、 質問者さんが使っているISPの転送速度に合わせた 最適化を行うことで、正常に動作するものと思われます。

画像を拡大する
akki_swd
質問者

お礼

解決しました。 なかなか長い時間悩んでいたので助かりました。 本当にありがとうございました。

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

関連するQ&A

  • サムネイル画像の特殊性について疑問！

    よくサムネイルといいますが、小さい画像をクリックすれば大きな画像のページになるってことですよね。 次のように http://www.bing.com/images/search?q=%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e7%94%bb%e5%83%8f&qpvt=%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e7%94%bb%e5%83%8f&qpvt=%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e7%94%bb%e5%83%8f&FORM=IGRE これって種類としてはサムネルという名称かも知れませんが、やっていることは普通に(1)小さな画像と(2)大きな画像を準備しておいて、(1)をクリックしたら(2)のページに移るだけのことですよね？ 通常のリンクですよね？ 特に特殊な効果でもないですよね？ よく解らないのでお聞きするんですが・・ 教えて下さい。

  • フル画像に拡大できるリンクがわからないので、教えて

    フル画像に拡大できるリンクがわからないので、教えてください。 https://f.hatena.ne.jp/t/%E3%82%A6%E3%82%A7%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%89%E3%83%AC%E3%82%B9 これらのpemaと書かれている画像のサムネイルをクリックすると違う画像（黒いTシャツの画像）が表示されてしまうのですがどうすればよいですか。元々はクリックするとフルサイズに拡大できました。 https://cdn-ak.f.st-hatena.com/images/fotolife/p/pema/20140105/20140105155348_120.jpg https://cdn-ak.f.st-hatena.com/images/fotolife/p/pema/20140105/20140105155348.jpg アドレスをいじってみて、.jpgの直前の_120を消すと少し大きめの画像が表示されましたが、フル画像に拡大できるリンクが元々表示できていたのですが、忘れてしまったので、教えてください。

  • ＹＭＭ４での立ち絵の設定について

    ゆっくり動画を始めようと思います。 ＹＭＭ４を使用します。 立ち絵の設定でつまづきました。 https://manjubox.net/ymm4/faq/%E7%AB%8B%E3%81%A1%E7%B5%B5%E6%A9%9F%E8%83%BD/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E7%AB%8B%E3%81%A1%E7%B5%B5%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95/ 　こちらのページを参照して、作業しようとしています。 事前に、きつねさんのニコトーク＆キャラ素材配布場所内から きつねゆっくりの魔理沙をダウンロードしました。 ダウンロードしたものは解凍して、デスクトップ上に置いてあります YMM4と立ち絵設定に話を戻します。 https://manjubox.net/ymm4/faq/%E7%AB%8B%E3%81%A1%E7%B5%B5%E6%A9%9F%E8%83%BD/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E7%AB%8B%E3%81%A1%E7%B5%B5%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95/ こちらのページの　③　の箇所まで順調にきました ④　立ち絵 → 素材フォルダ 欄右のボタンをクリックし、素材フォルダを選択する　 　の箇所で「・・・（省略）・・・￥デスクトップ￥魔理沙」を選択しました ⑤立ち絵 / 立ち絵アイテム → ファイル 欄 で、立ち絵アイテムのデフォルトの表情画像を指定する ここで暗礁にのりあげました ファイル　の隣の　長四角枠をクリックすると、ファイルの一覧が出てくるはずです。 しかしわたしのＹＭＭ４では「未選択」となってしまっています 素材をダウンロードして素材の場所を指定したのに、なぜ「未選択」とでてくるのか、ファイル一覧が表示されないのか たぶんここまでの経緯でどこかで何か間違えたのかもしれません おわかりになるかたいらっしゃいましたら教えてください

  • この変換ってどうやっていますか？

    http://ibisforest.org/index.php?%E3%83%AB%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%89%E3%83%AB%E5%A4%89%E6%8F%9B このページの一番上で f(x)+g(y)=xy と書かれていますが、左の２つの式からどうやればこれが導けるのでしょうか？ お願いいたします。

  • アフィリエイターさんについて

    この方↓から情報商材を購入しようと思っているのですが http://yaaachi.com/blog/%E7%89%B9%E5%AE%9A%E5%95%86%E5%8F%96%E5%BC%95%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E6%B3%95%E5%BE%8B%E3%81%AB%E5%9F%BA%E3%81%A5%E3%81%8F%E8%A1%A8%E7%A4%BA マレーシア　クアラルンプール在住と言ってますが特定商取引に関する法律に基づく表示に記載してある住所を見るとどっかの会社の寮みたいなんですよね。日本での拠点がここって可能性もありますが・・。こういう人って信じられませんか？

  • wikiの画像が見れません

    http://wikiwiki.jp/cabal_db/?%A5%B7%A5%B9%A5%C6%A5%E0%2F%A5%DF%A5%C3%A5%B7%A5%E7%A5%F3%C0%EF%C1%E8 上記のサイトなんですが、画像が全て見れないんです。 ほかの方に聞いたら普通に見れるようなので自分だけみたいです。 画像のところは全て　File not found: "hpup.PNG" at page "ファイル名"[添付]とかかれており、全く画像を見ることができないんです。 分かる方はいませんか？PCはVistaを使用しています。

  • IPアドレス別に表示する画像を変えられますか？

    当方の管理するサイト（Ａ）に画像をアップし、 その画像を他のサイト（Ｂ）で表示する時に Ａに置くPHPファイルでＢの訪問者のIPアドレス別に 表示する画像を変えられるのでしょうか。 もし可能でしたら、これからPHPを学習しようと考えており、 当方が必要とする部分が載っている本やサイトがありましたら ご教授願えるとありがたいです。 こちらのOKWaveに行き着くまでに調べた結果、 CGIでは当方がしたいことができるようです。 蛇足かもしれませんがURLを載せておきます。 http://72.14.235.104/search?q=cache:ERkmUmpqInwJ:sakaguch.com/PastBBS/0014/B0007323.html+IP%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E5%88%A5%E3%81%AB%E8%A1%A8%E7%A4%BA%E7%94%BB%E5%83%8F%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B&hl=ja&ct=clnk&cd=1&client=opera どうぞよろしくお願いいたします。

    • ベストアンサー
    • PHP
  • これらの画像のサムネイルをクリックしても違う画像（

    これらの画像のサムネイルをクリックしても違う画像（黒いTシャツの画像）が表示されてしまうのですがどうすればよいですか。 https://f.hatena.ne.jp/t/%E3%82%A6%E3%82%A7%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%89%E3%83%AC%E3%82%B9

  • アマゾンアフィリエイトの画像のみのリンクで、検索結果画面に行くようにするにはどうすればよいでしょうか?

    G-toolで、画像のみのリンクを貼ったのですが、 これをクリックしたらその商品のページではなく、検索結果画面に行くようにするにはどうしたら良いのでしょうか? テキストリンクではできるのは知ってますが、画像リンクで、です。 例えば、涼宮ハルヒの憂鬱のDVDEpisode0限定版の画像のみのリンクを貼ってたとしても、それをクリックすると、 涼宮ハルヒの憂鬱でアマゾンで検索した結果の画面に行くようにしたいのです。 http://www.amazon.co.jp/%E6%B6%BC%E5%AE%AE%E3%83%8F%E3%83%AB%E3%83%92%E3%81%AE%E6%86%82%E9%AC%B1-%E6%9C%9D%E6%AF%94%E5%A5%88%E3%83%9F%E3%82%AF%E3%83%AB%E3%81%AE%E5%86%92%E9%99%BA-Episode00-%E9%99%90%E5%AE%9A%E7%89%88-%E8%B0%B7%E5%B7%9D%E6%B5%81/dp/B000F9RBE4/sr=1-16/qid=1172561792/ref=sr_1_16/249-9349141-3413113?ie=UTF8&s=dvd ↑ではなく、 http://www.amazon.co.jp/s/ref=nb_ss_gw/249-9349141-3413113?__mk_ja_JP=%83J%83%5E%83J%83i&url=search-alias%3Daps&field-keywords=%97%C1%8B%7B%83n%83%8B%83q%82%CC%97J%9FT ↑のようなページに飛ぶようにしたい。 ちなみにラヴログのgoalbackテンプレートです。

  • JavaScriptで画像からリンクプラスアルファ

    http://www.printpac.co.jp/ こちらのページの 2段目のスライドしているナビゲーションのようにマウスオ-バーでnext,prevボタンが表示され、それをクリックすると次の画像が即座に表示され、なおかつ目的の画像からは個別のページへリンクする。というものが作りたいと思っています。 今現在はフェードインフェードアウト(画像表示の雰囲気がサンプルとは少し異なります)で画像を7枚順に表示されるようにするところまではＯＫです。 更に、最後の画像の（giifファイル）中の文字からクリックでリンクに飛ぶ。 そして、3秒周期の表示が待てない人にはnext,prevの矢印がマウスオーバーで出てきて、それをクリックすると次の画像がフェードインする。という風にしたいと思っています。 現在のコードです。 <script src="http://code.jquery.com/jquery.js"></script> <script language="JavaScript"><!-- $(function(){ myImageCnt = 7; // 画像の数 myImage = new Array( // 画像ファイル名の設定 "img/main/f01.jpg", "img/main/f02.jpg", "img/main/f03.jpg", "img/main/f04.jpg", "img/main/f05.jpg", "img/main/f06.jpg", "img/main/f07.jpg" ); myNowCnt = 0; // 現在表示している画像番号 function myChange(){ // 定期的に画像を更新する関数 if (myNowCnt == myImageCnt-1){ // 最後の画像まで表示したのなら myNowCnt=0; // 最初の画像に戻す }else{ // 最後の画像まで表示していないのなら myNowCnt++; // 次の画像へ } setTimeout(function() { $("#myFormImg").fadeOut(2000, function() { $(this).attr("src", myImage[myNowCnt]); $(this).fadeIn(1000, function() { myChange(); }); }); }, 3000); // 3秒周期 } myChange(); }); // --></script> <img src="img/main/f01.jpg" width="900" height="300" id="myFormImg"> <script language="JavaScript"><!-- myChange(); // --></script> サンプルのページでは"CSS"と"画像にMap"作ってリンク飛ばして、スライダーの動きはｊｓファイルで 制御しているようでしたのでこの"Ｍａｐ"を参考にひとまず最後に来るはずの画像を最初に持ってきて画像ファイルにＭａｐ作ってリンク飛ばして対応してるのですが、かなり苦し紛れ状態です・・・ 何をどのように記述すれば目的の物が出来るでしょうか？ よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する