プログラムのメモ置き場 @ ウィキ JavaScript > js001
※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

画像を縮小して表示(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: -