代码之家  ›  专栏  ›  技术社区  ›  Ali Imran

单击图像在新窗口上显示图像

  •  7
  • Ali Imran  · 技术社区  · 9 年前

    我从数据库中获取数据,其中有图像和其他一些字段,现在我希望当我单击它们在新窗口中打开的图像时,我的代码是

    <a target="_blank" href="#">
                      <img alt="" src="<%#"data:Image/png;base64,"+Convert.ToBase64String((byte[])Eval("ImageData"))  %>"" width="200" height="200" />
    
                 </a>
    

    我应该怎么做这个img传递到下一个窗口,并显示大或实际大小

    3 回复  |  直到 9 年前
        1
  •  4
  •   Khawaja Asim    8 年前

    您需要向代码中添加一些javascript。

    //HTML

     <a target="_blank" href="#" onClick='test(this)'>
     <img alt="" src="<%#"data:Image/png;base64,"+ Convert.ToBase64String((byte[])Eval("ImageData"))  %>"" />
     </a>
    

    //Javascript代码

     function test(element) {
            var newTab = window.open();
            setTimeout(function() {
                newTab.document.body.innerHTML = element.innerHTML;
            }, 500);
            return false;
        }
    

    Demo Fiddle

        2
  •  2
  •   Johannes    9 年前

    这个 href a 标记必须包含与 src 属性内部 img target="_blank" ,因此图像将以原始大小在新窗口中打开,只显示图像。

        3
  •  0
  •   Petr Kardačinský    8 年前

    //html

    <a target="_blank" href="#" onClick='zoom(this)'>
     <img alt="" id="choicedPhoto" src="<%#"data:Image/png;base64,"+ Convert.ToBase64String((byte[])Eval("ImageData"))  %>"" />
     </a>
    

    function zoom(element) {
             var newTab = window.open();
             var data = document.getElementById("choicedPhoto").getAttribute("src");
             setTimeout(function () {
                 newTab.document.body.innerHTML = "<img src='" + data + "'>";
             }, 500);
             return false;
         }
    

    您没有大小限制(作为原始img)