質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

任意画像の任意座標からの画像表示ができないです

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,100

th3

score 38

任意の画像のトリミングをしたいと考えています。
このときに、トリミングする始点(sx,sy)を任意の画像をクリックした座標に設定したいです。
プログラムでは、xとyをグローバル変数で宣言して、後で、event.xとevent.yをそれぞれx,yに代入して、それを始点にするように組んだのですが、(0,0)からの画像が表示されてしまいます。代入できていないようですが、何が原因なのでしょうか。
よろしくお願いします。
※訂正します
クリックしたところから始まる範囲の画像をトリミングすることはできますか?
もしくは、画像は表示できなくても良いので、その範囲の階調値を取得することはできますか?
元の画像は、モノクロ画像です。

  <img  id="aaa" src="/sub/map.jpg" height="500">
    <script type="text/javascript">  
    var x=0;
    var y=0;

    (function (){
    var element = document.getElementById("aaa");

    function MouseDownFunc(e){
        console.log(event.x,event.y);
        x=event.x;
        y=event.y;
    }
    // イベントリスナーに対応している
    if(element.addEventListener){
        element.addEventListener("mousedown" , MouseDownFunc);// マウスのボタンを押すと実行されるイベント
    // アタッチイベントに対応している
    }else if(element.attachEvent){
        element.attachEvent("onmousedown" , MouseDownFunc);// マウスのボタンを押すと実行されるイベント
    }})();

    onload = function() {
    draw();};
    function draw() {
    var canvas = document.getElementById('c1');
    if ( ! canvas || ! canvas.getContext ) { return false; }
      var ctx = canvas.getContext('2d');
      /* Imageオブジェクトを生成 */
      var img = new Image();
      img.src = "/sub/map.jpg?" + new Date().getTime();
      /* 画像が読み込まれるのを待ってから処理を続行 */
    img.onload = function() {
    ctx.drawImage(img, x, y, 500, 400, 80, 60, 400, 300);}}
</script>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

とりあえずfunction MouseDownFunc(e){function MouseDownFunc(event){にしてみるとか、どうですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/17 18:58

    回答ありがとうございます。
    eをeventに変えたものの、やはり(0,0)からの画像が表示されてしまいました。
    ほかのところをeventにしたりとしてみましたが、やはり、変わりませんでした。

    キャンセル

0

タイミングの問題です。
この書き方ではページを開いて window.onload が発火する前に mousedown を発動させなければ期待通りに動作しません。
mousedown したタイミングで draw() させなければなりません。

ところで、attachEvent で動作する IE8- は <canvas> に対応していないと思うのですが、Polyfill 的な何かを使っている前提なのでしょうか。

Re: th3 さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/18 09:41

    回答ありがとうございます。
    mousedownの中にonload=functionから後をいれてもみましたが、やはり(0,0)から始まります。
    こちらのURLを参考にcanvas.jsではなく、excanvas.jsをしようしています。
    なので、Polyfil的なのだと思います。
    http://www.html5.jp/canvas/how.html

    キャンセル

  • 2016/02/18 09:44

    訂正します。
    mousedownの中にonload=functionから後をいれてもみましたが、マウスを押しても画像はトリミングされませんでした。

    キャンセル

0

onload=function()をonclick=function()にすると上手くいきました。
っしかし、何回もクリックすると、前のimageと混同してしまうので、これを何らかの方法で初期化しないといけないみたいです。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る