管理メニュー

プログラムのメモ置き場 @ ウィキ

js001

最終更新：

chaka-poko

- view
管理者のみ編集可

画像を縮小して表示（javaScript）

テーブルのレイアウト

フィールド名 データ型
id int ID（主キー 連番）
subject varchar(300) 件名
title varchar(100) ファイル名
type varchar(50) MIMEタイプ
idata varbinary(MAX) バイナリ・データ
last_modified datetime 最終更新日

Thumbnail1.aspx

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head runat="server">
  3.     <title>画像を縮小して表示（JavaScript）</title>
  4.  
  5.     <style type="text/css">
  6.     <!--
  7.     /* 画像リサイズ用 */
  8.     /* 100x100の領域だけ取って、表示しない。 */
  9.     /* ただし、これではスクリプトOFFだと全く表示されない。 */
  10.     img.thumb { visibility: hidden; width: 100px; height: 100px;}
  11.     //-->
  12.     </style>
  13.  
  14.     <script type="text/javascript">
  15.     <!--
  16.    	//一旦縦横とも"auto"にして実寸を取得。長い方を"100px"に再設定。そして表示
  17. 	  function Rsize(img){
  18. 		  img.style.width = "auto";
  19. 		  img.style.height = "auto";
  20. 		  if (img.width > img.height){
  21. 			  if (img.width > 100) img.style.width = "100px";
  22. 			  } else {
  23. 			  if (img.height > 100) img.style.height = "100px";
  24. 			  }
  25. 		  img.style.visibility = "visible";
  26. 	    }
  27.     //-->
  28.     </script>
  29. </head>
  30. <body>
  31.     <form id="form1" runat="server">
  32.       <h3>
  33.         画像を縮小して表示（JavaScript）</h3>
  34.         <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">戻る</asp:HyperLink>
  35.       <p>
  36.         100px×100pxに収まるように比率を維持して縮小<br />
  37.         IE6用</p>
  38.       <asp:DataList ID="DataList1" runat="server" DataKeyField="id" DataSourceID="SqlDataSource1">
  39.         <ItemTemplate>
  40.           <strong>
  41.           id:</strong>
  42.           <asp:Label ID="lblId" runat="server" Text='<%# Eval("id") %>'></asp:Label>
  43.           <strong>
  44.           subject:</strong>
  45.           <asp:Label ID="lblSubject" runat="server" Text='<%# Eval("subject") %>'></asp:Label><br />
  46.           <asp:Image ID="imgIdata" runat="server" CssClass="thumb" /><br />
  47.           <hr />
  48.         </ItemTemplate>
  49.       </asp:DataList>
  50.       <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NetWorks01ConnectionString %>"
  51.         SelectCommand="SELECT [id], [subject] FROM [d_Image]">
  52.       </asp:SqlDataSource>
  53.     </form>
  54. </body>
  55. </html>

Thumbnail1.aspx.vb

  1. Partial Class ImageThumbnail_Thumbnail1
  2.     Inherits System.Web.UI.Page
  3.  
  4.   Protected Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.ItemDataBound
  5.  
  6.     If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
  7.       Dim id As Label = CType(e.Item.FindControl("lblId"), Label)
  8.       Dim image As Image = CType(e.Item.FindControl("imgIdata"), Image)
  9.  
  10.       image.ImageUrl = "Image1.aspx?id=" & id.Text
  11.       image.Attributes.Add("onload", "Rsize(this)")
  12.     End If
  13.  
  14.   End Sub
  15. End Class

Image1.aspx

※空のページ 
  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head runat="server">
  3.  <title>画像</title>
  4. </head>
  5. <body>
  6.  <form id="form1" runat="server">
  7.  </form>
  8. </body>
  9. </html>

Image1.aspx.vb

  1. Imports System.Data.SqlClient
  2. Imports System.Data
  3.  
  4. Partial Class ImageThumbnail_Image1
  5.   Inherits System.Web.UI.Page
  6.  
  7.   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  8.  
  9.     '選択されたIDの画像をDBから取り出して表示する。
  10.  
  11.     Dim id As Integer
  12.     id = Request.QueryString("id")
  13.  
  14.     Dim db As New SqlConnection(ConfigurationManager.AppSettings("dbstr"))
  15.     Dim cmd As SqlCommand = New SqlCommand("SELECT type,idata FROM d_Image WHERE id=@p1", db)
  16.     Dim p1 As SqlParameter = cmd.Parameters.Add("@p1", SqlDbType.Int)
  17.     p1.Value = id
  18.     db.Open()
  19.     Dim rs As SqlDataReader = cmd.ExecuteReader()
  20.     If rs.Read Then
  21.       Response.ContentType = CType(rs("type"), String)
  22.       Response.BinaryWrite(DirectCast(rs("idata"), Byte()))
  23.       Response.End()
  24.     End If
  25.     rs.Close()
  26.     db.Close()
  27.  
  28.   End Sub
  29. End Class

参考にさせていただいたページ

※現在行方不明…見つかり次第のせます
[Counter] Total： -
「js001」をウィキ内検索
最近更新されたページ
もっと見る
目安箱バナー