將頁面上的圖片等比例縮放顯示出來

 

頁面上加上這段腳本   控制 Image 控件縮放圖片。

<script type="text/javascript">
     function DrawImage(ImgD) {
         var image = new Image();
         var iwidth = 800;
         var iheight = 600; //定義允許高度，當寬度大於這個值時等比例縮小
         image.src = ImgD.src;
         if (image.width > 0 && image.height > 0) {
             flag = true;
             if (image.width / image.height >= iwidth / iheight) {
                 if (image.width > iwidth) {
                     ImgD.width = iwidth;
                     ImgD.height = (image.height * iwidth) / image.width;
                 } else {
                     ImgD.width = image.width;
                     ImgD.height = image.height;
                 }
             } else {
                 if (image.height > iheight) {
                     ImgD.height = iheight;
                     ImgD.width = (image.width * iheight) / image.height;
                 } else {
                     ImgD.width = image.width;
                     ImgD.height = image.height;
                 }
             }
         }
     }

        function test() {
            var str = document.getElementById('isload').value;
            if (str == "1") {
                // AutoResizeImage(233, 208, document.getElementById('myimage'));
                DrawImage(document.getElementById('image1'))
            }
         }
       
    </script>

 

 

前臺DIV

<div>
    <input type="image" ID="image1" runat="server"  />
      <asp:HiddenField ID="isload" runat="server" Value="0" />
    </div>

 

 

後臺執行腳本

 

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            showImage();
        }
    }

 

 private void showImage()
    {
        string script2 = "var ret= document.getElementById('image1');ret.src='" + Request.QueryString["imageURL"] + "?dt=" + DateTimeUtility.getSystemTime2(null) + "';";//加入隨機數防止瀏覽器緩存 +Math.random()  AutoResizeImage(250,250,ret);
        executeScript(script2);

        string script3 = "document.getElementById('isload').value='1';";
        executeScript(script3);

        script3 = "setTimeout(test, 100);";
        executeScript(script3);
    }