zoukankan      html  css  js  c++  java
  • 图片浏览 h5

    @{
        Layout = null;
    }
    
    <html>
    <head>
        <script type="text/javascript" src="~/scripts/jquery-1.10.2.min.js"></script>
        <meta name="viewport" content="width=device-width,height=device-height, minimum-scale=0.1">
        <style>
            img {
                text-align: center;
                position: absolute;
                margin: auto;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
    
            .overflowingVertical {
                cursor: zoom-out;
            }
    
            .shrinkToFit {
                cursor: zoom-in;
            }
    
            body {
                background-color: #272525;
                color: #eee;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <img src="@ViewBag.PicURL" alt="@ViewBag.PicURL" onload="initImg();" />
        <script>
            function initImg() {
                drawImage($("img"), document.body.clientWidth, document.body.clientHeight);
            }
            function drawImage(ImgD, FitWidth, FitHeight) {
                var image = new Image();
                image.src = ImgD.attr("src");
                if (image.width > 0 && image.height > 0) {
                    if (image.width / image.height >= FitWidth / FitHeight) {
                        if (image.width > FitWidth) {
                            ImgD.css("width", FitWidth);
                            ImgD.css("height", (image.height * FitWidth) / image.width);
                            $("img").attr("class", "shrinkToFit");
                            ImgD.css("margin-top", 0);
                        } else {
                            ImgD.css("width", image.width);
                            ImgD.css("height", image.height);
                        }
                    } else {
                        if (image.height > FitHeight) {
                            ImgD.css("height", FitHeight);
                            ImgD.css("width", (image.width * FitHeight) / image.height);
                            $("img").attr("class", "shrinkToFit");
                            ImgD.css("margin-top", 0);
    
                        } else {
                            ImgD.css("width", image.width);
                            ImgD.css("height", image.height);
                        }
                    }
                }
            }
            $("img").mousedown(function () {
                if (typeof $(this).attr("class") != "undefined") {
                    $(this).toggleClass("shrinkToFit overflowingVertical");
                    if ($(this).hasClass("overflowingVertical")) {
                        var img = new Image();
                        img.src = $(this).attr("src");
                        var imgWidth = img.width; //图片实际宽度
                        var imgHeight = img.height; //图片实际高度
                        drawImage($(this), imgWidth, imgHeight);
                    }
                    if ($(this).hasClass("shrinkToFit")) {
                        drawImage($("img"), document.body.clientWidth, document.body.clientHeight);
                    }
                }
            });
        </script>
    </body>
    </html>

    后台:

    /// <summary>
            /// 图片自适应居中打开,非图片浏览器下载
            /// </summary>
            /// <param name="dirRelativePath">文件路径,包含文件名</param>
            /// <param name="fileName">文件名</param>
            /// <returns></returns>
            public ActionResult OpenPicture(string dirRelativePath, string fileName)
            {
                Regex regex = new Regex(@".jpg|.bmp|.png|.gif|.tiff");
                fileName = fileName.ToLower();
                var isMatch = regex.IsMatch(fileName);
                //图片
                if (isMatch)
                {
                    ViewBag.PicURL = "/Home/DownLoad?dirRelativePath=" + dirRelativePath + "&fileName=" + fileName;
                }
                else
                {
                    return RedirectToAction("DownLoad", "Home", new { dirRelativePath = dirRelativePath, fileName = fileName });
                }
                return View();
            }
            /// <summary>
            /// 下载附件
            /// </summary>
            /// <param name="dirRelativePath"></param>
            /// <param name="fileName"></param>
            /// <returns></returns>
            public ActionResult DownLoad(string dirRelativePath, string fileName)
            {
    
                string uploadPath = System.Configuration.ConfigurationManager.AppSettings["BPMAttachments"];
                string dirAbsolutePath = uploadPath + dirRelativePath;
    
                if (!System.IO.File.Exists(dirAbsolutePath))
                {
                    return Content("提示:文件在磁盘上不存在");
                }
                //HttpContext.Response.AddHeader("content-disposition", "attachment;filename=" + fileName);
                //return File(dirAbsolutePath, "application/octet-stream");
                var contentType = MimeMapping.GetMimeMapping(fileName);
                HttpContext.Response.AddHeader("content-disposition", "inline;filename=" + fileName);
                return File(dirAbsolutePath, contentType);
            }
  • 相关阅读:
    python thrift
    redis 知识点
    Spring其他注解和xml配置(不常用的)
    Spring常用的的注解以及对应xml配置详解
    Eureka的工作原理简介
    SpringBoot的自动配置实现和介绍
    SpringBoot多配置文件,切换环境
    数据卷介绍和常用的服务部署
    Spring Security简介
    在Java中入门,读取和创建Excel,Apache POI的使用
  • 原文地址:https://www.cnblogs.com/xuguanghui/p/5973608.html
Copyright © 2011-2022 走看看