- PR -

Webコントロールでの画像の拡大/縮小

1
投稿者投稿内容
Ukeke。
会議室デビュー日: 2002/07/29
投稿数: 8
投稿日時: 2002-08-12 20:41
こんにちは。
前回は初歩的な質問で失礼いたしました。
 
今回の質問は
「Webコントロールを使用して、ブラウザ上の画像を拡大/縮小できるか?」
ということです。
■簡単な説明
 ・ブラウザ上に
   「Image」Webコントロール × 1
   「Button」Webコントロール × 2
  を配置。
 ・「Image」WebコントロールへJpegファイルを設定
 ・「Button」WebコントロールのCaptionをそれぞれ「拡大」、「縮小」とする。
 ・「拡大」Buttonが押下された場合は、「Image」Webコントロールの
  画像を拡大表示、「縮小」Buttonが押下された場合は、画像を縮小表示する。
 
「Image」Webコントロールを使用しまして、サンプルを作成してみたのですが
上手く動作させることが出来ず、試行錯誤している状態です。
何か情報をお持ちの方がいらっしゃいましたらよろしくお願いいたします。

※開発環境
 ・言語:VB.NET
 ・ブラウザ:IE6.0
 ・OS:Windows2000
 ・Webサーバー:IIS5.0
biac
大ベテラン
会議室デビュー日: 2001/10/22
投稿数: 106
投稿日時: 2002-08-12 22:43
引用:

「Webコントロールを使用して、ブラウザ上の画像を拡大/縮小できるか?」


Web コントロールじゃなきゃダメですか? f(^^;

IE5 / NN6 以降に限定して、クライアント側で JavaScript を使ってよければ・・・
CSS で画像サイズを変更できます。

コード:
// id 属性 "IMAGE" を持った img 要素があるとして

function adjustHeight(){
var m_img = this.document.getElementById('IMAGE');
// ↑ ほんとは、body 要素の onload 属性で処理すれば、一回で済む。
m_img.style.height='90%'; // ← 適当に加減して。
// Window サイズの取得は IE と NN で違うので面倒だけど。
m_img.style.width='auto';
}
function adjustWidth(){
var m_img = this.document.getElementById('IMAGE');
m_img.style.height='auto';
m_img.style.width='100%';
}
function normalSize(){
var m_img = this.document.getElementById('IMAGE');
m_img.style.height='auto';
m_img.style.width='auto';
}



※ どうしてもサーバサイドで、となると、同じような指定をする CSS を動的に書き出してやればいいような気がします。

[ メッセージ編集済み 編集者: biac 編集日時 2002-08-12 22:48 ]
うりゅう
大ベテラン
会議室デビュー日: 2002/06/15
投稿数: 202
お住まい・勤務地: Hiroshima
投稿日時: 2002-08-13 15:01
>「Webコントロールを使用して、ブラウザ上の画像を拡大/縮小できるか?」

厳密に言えば、WEBコントロールではないですが、.NET FRAMEWORKで出来ます。
しかも、これを使えば、UPLOAD等が行われた際に、BMP・TIFF・PNG・JPEGなどを相互にフォーマット変換して、圧縮・拡大・縮小などを行った上でファイル保存もできてしまうという、.NET FRAMEWORK恐るべしと思ってしまいました。

 閑話休題。プレビューオンリーであれば、biacさんのクライアントサイドのサンプルの方が適当かと思います。ASP.NETの仕様上、サーバサイドで行う場合には必ず一度ファイルの保存が必要なため、テンポラリの保存フォルダが必要になります。また、そのフォルダにはASPNETアカウントの書き込み権限が必要になります。

 下記がサンプルです。サーバがそれほど遅くなければスピードは結構気になりません。拡大ボタン、縮小ボタンを押すたびに画像を拡大/縮小しますが、その拡大縮小処理は常に元の画像から行うので、画像が荒れ続けることはりません。

 サーバサイドの利点というか何というか汎用性が高いので、拡大縮小した後にその結果の画像を保存したい場合にでも、テンポラリのファイルを元のファイルの上に上書きする(System.IO.File.Copy(IFT, IFO, True))だけでいいため使い回しは聞きやすいかと。参考になれば幸いです。
----------------------------------------------------------------------
コード:
Protected WithEvents bigb As System.Web.UI.WebControls.Button
    Protected WithEvents smallb As System.Web.UI.WebControls.Button
    Protected WithEvents Image1 As System.Web.UI.WebControls.Image

    Public Shared IMGS As Integer '現在の画像の拡大縮小率
    Public Shared BP As Integer '画像の拡大率
    Public Shared SP As Integer '画像の縮小率
    Public Shared IFO As String '元画像のパス
    Public Shared IFT As String 'テンポラリ用の画像パス

    Private Sub Page_Load(ByVal sender As System.Object, _
                          ByVal e As System.EventArgs) Handles MyBase.Load
        ' ページを初期化する ユーザー コードをここに挿入します。
        If Not IsPostBack Then
            IMGS = 100
            BP = 10
            SP = 10
            IFO = Server.MapPath("./") & "/PIX/" & "BB30.JPG"
            IFT = Server.MapPath("./") & "/IMGTMP/" & "TMP.JPG"
            Image1.ImageUrl = IFO
        End If
    End Sub

    Private Sub smallb_Click(ByVal sender As System.Object, _
                             ByVal e As System.EventArgs) Handles smallb.Click
        '元画像からビットマップオブジェクトを作成
        Dim IMG As New Bitmap(IFO)
        IMGS += -BP
        '元の画像から見て指定されただけ、縮小された縦横のサイズを格納
        Dim Sizew As Integer = IMG.Width * (IMGS / 100)
        Dim Sizeh As Integer = IMG.Height * (IMGS / 100)
        'サイズの縮小拡大を行うメソッド(元画像オブジェクト,横サイズ,縦サイズ,JPEG圧縮率,保存先のファイル名)
        OPTIMG(IMG, Sizew, Sizeh, 100L, IFT)
        'ビットマップオブジェクトの解放
        IMG.Dispose()
        'ブラウザ上のイメージコントロールの画像を変更
        Image1.ImageUrl = IFT
    End Sub

    Private Sub bigb_Click(ByVal sender As System.Object, _
                           ByVal e As System.EventArgs) Handles bigb.Click
        Dim IMG As New Bitmap(IFO)
        IMGS = IMGS + BP
        Dim Sizew As Integer = IMG.Width * (IMGS / 100)
        Dim Sizeh As Integer = IMG.Height * (IMGS / 100)
        OPTIMG(IMG, Sizew, Sizeh, 100L, IFT)
        IMG.Dispose()
        Image1.ImageUrl = IFT
    End Sub

    '画像のJPEG化とサイズ調整を行うためのメソッド
    Public Sub OPTIMG(ByVal IMG As Bitmap, _
                      ByVal SIZEW As Integer, _
                      ByVal SIZEH As Integer, _
                      ByVal JPGCOMP As Long, _
                      ByVal sfol As String)
        '元のビットマップオブジェクトから、新しいサイズの変更されたビットマップオブジェクトの作成
        Dim bitmap As New Bitmap(IMG, SIZEW, SIZEH)
        'JPEG変換に関するエンコーダ情報部
        Dim myImageCodecInfo As System.Drawing.Imaging.ImageCodecInfo
        Dim myEncoder As System.Drawing.Imaging.Encoder
        Dim myEncoderParameter As System.Drawing.Imaging.EncoderParameter
        Dim myEncoderParameters As System.Drawing.Imaging.EncoderParameters
        myImageCodecInfo = GetEncoderInfo("image/jpeg")
        myEncoder = System.Drawing.Imaging.Encoder.Quality
        myEncoderParameters = New System.Drawing.Imaging.EncoderParameters(1)
        myEncoderParameter = New System.Drawing.Imaging.EncoderParameter(myEncoder, JPGCOMP)
        myEncoderParameters.Param(0) = myEncoderParameter
        'ビットマップオブジェクトを指定された条件で、ファイルとして保存
        bitmap.Save(sfol, myImageCodecInfo, myEncoderParameters)
        bitmap.Dispose()
    End Sub

    'JPEGインフォメーションエンコーダを受け取るためのメソッド
    Private Function GetEncoderInfo(ByVal MYmimeType As String)
        Dim i As Integer
        Dim encoders As System.Drawing.Imaging.ImageCodecInfo() = _
            System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders()
        For i = 0 To (encoders.Length - 1)
            If (encoders(i).MimeType = MYmimeType) Then
                Return encoders(i)
            End If
        Next i
    End Function



_________________
--------------------------------------
ネットビルド 小田原貴樹
odahara@netbuiuld.jp
--------------------------------------
Ukeke。
会議室デビュー日: 2002/07/29
投稿数: 8
投稿日時: 2002-08-19 23:29
biac様、うりゅう様
 
連休で返事が遅れてしまいましたが、ご回答ありがとうございます。
さっそく、今日コーディングしてみました。

クライアントマシンにはブラウザ以外は配布しないという事になっているので、
うりゅう様の方法で作成してみました。
拡張機能として保存なども想定していたので、
この方法だと思ったより簡単に出来てしまう点が、すばらしいです。

現在、画像の回転を行なおうと思考錯誤しております。
Image.RotateFlipメソッドを使用してBMPのファイルを編集しておりますが、
自分の思っている回転とは使い勝手が少々違うようでして...。
別な方法も考えてみているところです。
 
今回はご回答ありがとうございました。
自分もはやく人に教えてあげることが出来るほどの知識を身につけたいものです。
じゅんた
会議室デビュー日: 2002/09/06
投稿数: 2
投稿日時: 2002-09-06 14:02
すいません。質問させてください。

うりゅう様のソースを使用して試させてもらったのですが、
画像の大きさの変更の際に元のファイルよりもファイルサイズが大きくなってしまいました。

ファイルサイズを小さくする方法が分かりましたら教えていただきたいのですが。

突然割り込んでの質問で申し訳ありませんがよろしくお願いします。
うりゅう
大ベテラン
会議室デビュー日: 2002/06/15
投稿数: 202
お住まい・勤務地: Hiroshima
投稿日時: 2002-09-06 22:16
ご指名を受けまして、久々の書き込みです。8末・9頭と死ぬほど忙しかった(まだ半分継続中)っす(笑)

>うりゅう様のソースを使用して試させてもらったのですが、
>画像の大きさの変更の際に元のファイルよりもファイルサイズが大きくなってしまいました。

もう一度ソースをごらん頂いて、

'サイズの縮小拡大を行うメソッド(元画像オブジェクト,横サイズ,縦サイズ,JPEG圧縮率,保存先のファイル名)
OPTIMG(IMG, Sizew, Sizeh, 100L, IFT)

問題はこのJPEG圧縮率です。JPEGの仕様上100%というのは無圧縮(JPEG的に)なので
これを例えば95L(95%)にすると、ファイルサイズ自身はかなり小さくなります。

しかし、僕がUPしているソースは標準の画像圧縮とサイズの拡大縮小をしているだけですので、例えば、Optpix WebDesinerなどのような専門のソフトに比べるとだいぶサイズも大きいですし、画質も落ちます。

この辺が今後の課題です。
_________________
--------------------------------------
ネットビルド 小田原貴樹
odahara@netbuiuld.jp
--------------------------------------
じゅんた
会議室デビュー日: 2002/09/06
投稿数: 2
投稿日時: 2002-09-10 18:12
うりゅう様

ありがとうございます。
早速試してみたいと思います。

ご丁寧な返答ありがとうございました。
1

スキルアップ/キャリアアップ(JOB@IT)