- PR -

JavaScriptの質問/画像の拡大、回転方法

投稿者

投稿内容

Hilda: 常連さん; 会議室デビュー日: 2006/02/12; 投稿数: 37

投稿日時: 2006-02-27 13:26

はじめまして、初めて書きこみ&質問させていただきます。

以下の質問を「Java Solution 会議室」より転記いたします。
(こちらのほうが、より適しているようなので。)

JavaScriptの会議室を見つけられなかったので、ここに質問させていただきます。
申し訳ありません。

Safari上で画像の拡大、回転を行うJavaScriptを作成しているのですが、
うまく表示できません。
Safariのver2以上で対応されているCanvasタグを使用し実現させようと考えています。
※Safari上で、別の方法で実現できるのであれば、Canvasタグでなくてもかまいません。
※FireFoxでは実現できたのですが、そのソースはSafariでは動きませんでした。

現在、ためしに拡大処理部分だけを切り出して動作確認しておりますが、
拡大を行ったとき、枠部分のみ大きくなるだけで画像が表示されません・・・。

何かご存知の方がいらっしゃいましたら、ご教授をよろしくおねがいいたします。

動作確認しているバージョンは、Safari Ver 2.0.3です。
ソースは大体こんなかんじです。↓
--------
<script type="text/javascript">
</script>
<input type=submit value="拡大" OnClick="drawscale()"><br><br>
<canvas id="タグ" style="border:1px black solid">

冬寂: ぬし; 会議室デビュー日: 2002/09/17; 投稿数: 449

投稿日時: 2006-02-27 15:26

えっと。先に言っておきますが答えじゃありません。（すみません（汗））

canvas タグってなんじゃらほい？っと調べてみたら・・・おぉ！こんな面白いモノあったんですね！

という訳で、うちでは（残念ながらfirefox1.5ですが）こんな感じでうまく動いてます。

コード:

<script type="text/javascript"><!--
var sca = 1;
var scr = 0;
function drawscale(times, rotate) {
    sca *= times;
    var canvasObj = document.getElementById("tag"); 
    var conObj = canvasObj.getContext("2d"); 
    var imgObj = new Image(); 
    imgObj.src = "画像名.jpg"; 
    if (rotate) {
        scr += rotate;
        conObj.rotate(scr * Math.PI / 180);
    }
    conObj.drawImage(imgObj, 0, 0, imgObj.width * sca, imgObj.height * sca); 
} 
//--></script>
<input type=submit value="拡大" OnClick="drawscale(1.1)"><br><br> 
<input type=submit value="縮小" OnClick="drawscale(0.9)"><br><br> 
<input type=submit value="回転" OnClick="drawscale(1, 0.1)"><br><br> 
<canvas id="tag" style="border:1px black solid" />

（ひとしきり遊んだ後で）
・・・で、Safari 無い私としてはこれ以上何も言えませんが・・・
とりあえず、DOM Inspector とかで getContext メソッドがあるか？とか調べてみてはどうでしょ？
（無かったら、そのバージョンで canvas タグって実装されてるの？と safari のコミュニティに聞いてみると何か分かるのでわ？）

mio: ぬし; 会議室デビュー日: 2005/08/25; 投稿数: 734; お住まい・勤務地: 神奈川県

投稿日時: 2006-02-27 15:56

試してませんが、scaが初期化されていないから++しても1になっていないのではないでしょうか。

>(こちらのほうが、より適しているようなので。)
というか、別物なのでJava Solutionではだめでしょう。

Hilda: 常連さん; 会議室デビュー日: 2006/02/12; 投稿数: 37

投稿日時: 2006-02-27 23:28

冬寂さま、mioさま
ご返答いただき、ありがとうございました。

以下のソースで初回(onload時)の拡大、回転は表示できましたが、
やはり"回転拡大"ボタンを押すと、枠のみの表示になってしまうという
問題がおきています。(Safariでの確認結果)
(拡大を行わず、rotate処理のみであれば、冬寂さまのソースと同じような回転ができました)

>冬寂さま

>とりあえず、DOM Inspector とかで getContext メソッドがあるか？とか調べてみてはどうでしょ？

以下のサイトではあるようでした。
(http://www.mozilla.org/projects/inspector/ の右上の検索で"canvas"で検索した結果です。的外れでしたらもうしわけありません。)
http://developer.mozilla.org/ja/docs/Canvas_tutorial:Basic_usage

>（無かったら、そのバージョンで canvas タグって実装されてるの？と safari のコミュニティに聞いてみると何か分かるのでわ？）

また、以下のソースで表示はできましたので、実装はされているようです。

(また、以下のサイトからも、Safariのver2以上で実装されているようです。)
http://www.openspc2.org/HTML/tag/canvas/

>mioさま

>試してませんが、scaが初期化されていないから++しても1になっていないのではないでしょうか。

掲載したonload時の初期化処理を省いて乗せてしまっていました。
実際は初期化しておりました。
申し訳ありません。

>>(こちらのほうが、より適しているようなので。)
>というか、別物なのでJava Solutionではだめでしょう。

おっしゃるとおりです。
今後は気をつけます。申し訳ありません。

現在確認中サンプル:
------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>Samplerotate</title>
<script type="text/javascript">
</script> </head>
<body onload="draw()">

<input type=submit value="回転拡大" onClick="draw()"><br><br>
<canvas id="imgCanvas" style="border:1px black solid">
<img src="画像.jpg" style="visibility:hidden">

</body>
</html>
----------

冬寂: ぬし; 会議室デビュー日: 2002/09/17; 投稿数: 449

投稿日時: 2006-02-28 10:19

引用:
以下のサイトではあるようでした。 (http://www.mozilla.org/projects/inspector/ の右上の検索で"canvas"で検索した結果です。的外れでしたらもうしわけありません。) http://developer.mozilla.org/ja/docs/Canvas_tutorial:Basic_usage

Firefox で tool 類をインストールするとついてくる DOM Inspector を使って直に要素見てみたらどうかな？という意味だったのですが、その DOM Inspector の紹介ページの URL も書いてある事だし、すでに知ってはいるのかな。
（まぁ、どのみち表示は出来ているんだから実装されているのは確実だろうしどうでもいいか）

んで、この部分

コード:
imgCanvas.style.width = imgObj.width * sca; imgCanvas.style.height = imgObj.height * sca;

これはcanvasが大きくなるだけなのでわ？
canvas内の画像を拡大するのなら、
drawImage(画像オブジェクト, x, y, 幅, 高さ)
という風に指定してあげなくてはいけません。
（参考：http://www.openspc2.org/HTML/appendix/canvas_param/canvas/drawImage/index.html）

# って、最初に書いたように全て Firefox で検証してるもんで・・・safariでは事情が違うというのでしたら申し訳ありません（汗）

Hilda: 常連さん; 会議室デビュー日: 2006/02/12; 投稿数: 37

投稿日時: 2006-02-28 23:40

冬寂さま

>Firefox で tool 類をインストールするとついてくる DOM Inspector を使って直に要素見てみたらどうかな？という意味だったのですが、その DOM Inspector の紹介ページの URL も書いてある事だし、すでに知ってはいるのかな。

意味をわかっていませんでした。申し訳ありません。
もう一度調べてみます。

>これはcanvasが大きくなるだけなのでわ？

imgCanvas.style.width と imgCanvas.style.height のサイズ設定をしておかないと
画像がまったく表示されませんでした( width = 1px ,height = 1px と認識しているようで、黒い点(.)みたいな表示になってしまいました。)

→ですが、imgCanvas.style.width と imgCanvas.style.height を固定とすると、
表示域(枠？)は固定ですが中の画像は大きくなっていったようでした！(今やってみました。)
この値をあらかじめ大きめにとっておけばいいかもしれません。
もう少しためしてみます。
(固定ではだめなケースがでてくるかもしれませんが・・・・)

>canvas内の画像を拡大するのなら、
>drawImage(画像オブジェクト, x, y, 幅, 高さ)
>という風に指定してあげなくてはいけません。

画像サイズは "conObj.scale(sca,sca); "で大きくしていました。
(いきなりこっちに変えてしまっていました。申し訳ありません)

scaleメソッド参照
http://www.openspc2.org/HTML/appendix/canvas_param/canvas/scale/index.html

＠IT SpecialPR

JavaScriptの質問/画像の拡大、回転方法

スキルアップ／キャリアアップ（JOB@IT）