首页 > 编程语言 >C#进阶-ASP.NET实现可以缩放和旋转的图片预览页

C#进阶-ASP.NET实现可以缩放和旋转的图片预览页

时间：2024-08-14 17:16:30浏览次数：9  
标签：ASP 进阶 img 缩放 50% left var 页面 图片

本文详细介绍了如何在ASP.NET WebForms中实现一个功能丰富的图片预览页面。通过结合HTML、CSS和JavaScript，用户可以方便地对图片进行放大、缩小以及旋转操作。文章从页面的基本布局开始，逐步讲解了如何设置图片展示区、添加控制按钮、编写CSS样式以及实现JavaScript功能，最终展示了一个直观且易用的图片预览解决方案。通过这个项目，读者可以学会如何在Web应用中动态处理图片，提高用户交互体验。

一、实现思路

在现代Web应用中，用户对图片的操作需求日益增加，尤其是在图片展示时能够方便地进行放大、缩小以及旋转等操作。为了满足这些需求，本项目基于ASP.NET WebForms开发了一个图片预览页面，用户可以通过简单的按钮操作来调整图片的大小和角度。实现这一功能的核心在于使用HTML、CSS和JavaScript结合来动态调整图片的样式属性，以达到相应的效果。

二、实现步骤

1. 创建ASP.NET页面

首先，我们需要创建一个ASP.NET WebForms页面。在Visual Studio中，右键点击你的项目，选择添加 -> 新建项。

选择Web 窗体，命名为 IMGShow.aspx。

2. 添加HTML布局

接下来，在 IMGShow.aspx 文件中添加基本的HTML结构。这包括设置页面的DOCTYPE、meta标签、title等，以及link标签导入所需的CSS文件。以下是页面的基本结构：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IMGShow.aspx.cs" Inherits="WebForms.IMGShow" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>图片展示</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body class="easyui-layout" data-options="fit:true">
</body>
</html>

3. 设置图片展示区

在body标签中，添加一个div容器，用于展示图片。这个容器需要设定宽度和高度，以保证图片能在页面居中显示。然后，使用img标签加载图片。这里，我们设置图片初始宽度为60%。

HTML代码里创建一个放置图片的DIV：

<div style="text-align: center; vertical-align: middle;" class="content">
    <img id="bigimg" src="a.png" width="60%" />
</div>

JavaScript代码里对图片路径赋值：

<script type="text/javascript">
	// 页面初始化时加载图片
	$(document).ready(function () {
		var path = window.location.href.split('=')[1];
		$("#bigimg").attr('src', path);
	});
</script>

4. 添加控制按钮

在图片展示区的下方，我们需要添加四个按钮，用于放大、缩小、左旋转和右旋转图片。每个按钮都绑定相应的JavaScript函数，点击后会执行特定的图片操作。

<div style="margin-top: 150px; margin-left: 50px">
    <a href="javascript:void(0)" class="btn icon-add" onclick="imgBigToSize()">放大</a><br />
    <br />
    <a href="javascript:void(0)" class="btn icon-remove" onclick="imgSmallToSize()">缩小</a><br />
    <br />
    <a href="javascript:void(0)" class="btn icon-arrow-turn-left" onclick="imgRotateLeft()">左旋转</a><br />
    <br />
    <a href="javascript:void(0)" class="btn icon-arrow-turn-right" onclick="imgRotateRight()">右旋转</a>
</div>

5. 编写CSS样式

为了美化页面，我们需要为按钮添加一些基本的样式。可以在<head>标签中添加<style>标签来定义这些样式。

<style>
    .content {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: white;
        overflow: hidden;
        background-position: 50%;
    }

    .btn {
        display: inline-block;
        padding: 5px 10px;
        margin: 5px;
        background-color: aliceblue;
        border: 1px solid #ccc;
        border-radius: 4px;
        text-decoration: none;
        color: #333;
        cursor: pointer;
        font-size: 14px;
        position: relative;
        padding-left: 30px; 
    }

    .btn:hover {
        background-color: #f0f0f0;
    }

    .icon-add::before {
        content: url('images/add.png'); 
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .icon-remove::before {
        content: url('images/remove.png'); 
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .icon-arrow-turn-left::before {
        content: url('images/arrow_turn_left.png'); 
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .icon-arrow-turn-right::before {
        content: url('images/arrow_turn_right.png'); 
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

6. 添加缩放和旋转功能

在页面的<head>标签中，添加JavaScript脚本，分别实现放大、缩小、左旋转和右旋转功能。

<script type="text/javascript">
    // 放大图片
    function imgBigToSize() {
        var img = $("#bigimg");
        var oWidth = img.width();
        var oHeight = img.height();
        img.width(oWidth + 50);
        img.height(oHeight + 50 / oWidth * oHeight);
    };

    // 缩小图片
    function imgSmallToSize() {
        var img = $("#bigimg");
        var oWidth = img.width();
        var oHeight = img.height();
        img.width(oWidth - 50);
        img.height(oHeight - 50 / oWidth * oHeight);
    };

    var r = 0;
    // 左旋转图片
    function imgRotateLeft() {
        var img = $("#bigimg");
        r -= 90;
        img.css('transform', 'rotate(' + r + 'deg)');
    };

    // 右旋转图片
    function imgRotateRight() {
        var img = $("#bigimg");
        r += 90;
        img.css('transform', 'rotate(' + r + 'deg)');
    };

    // 页面初始化时加载图片
    $(document).ready(function () {
        var path = window.location.href.split('=')[1];
        $("#bigimg").attr('src', path);
    });
</script>

7. 测试并调整

最后，保存所有文件并运行项目。在浏览器中访问该页面，确保所有按钮功能正常工作。如果需要，可以根据需求进一步调整样式或功能。

通过这些步骤，你将创建一个ASP.NET WebForms页面，用户可以在其中放大、缩小和旋转图片。这些功能是通过JavaScript动态控制图片的width、height和transform属性实现的。

三、实现效果

页面加载后，用户可以看到一张图片居中显示。通过点击页面下方的按钮，用户可以进行以下操作：

  • 放大图片：点击放大按钮，图片的宽度和高度按比例增大。
  • 缩小图片：点击缩小按钮，图片的宽度和高度按比例减小。
  • 左旋转图片：点击左旋转按钮，图片逆时针旋转90度。
  • 右旋转图片：点击右旋转按钮，图片顺时针旋转90度。

最终效果如图所示：

作为图片的预览页，我们一般会在点击图片时的事件中调用，下面提供两种常用的调用策略：

  • 页面跳转：用 window.location.href='IMGShow.aspx?imgStr=xxx'来调用，实现当前页面跳转到图片预览页面。

  • 新页面弹窗：用 window.open('IMGShow.aspx?imgStr=xxx', "_blank")来调用，在弹出的新窗口里显示。

这里提供一个可以定义弹窗大小的JavaScript方法：

function opendetailMode(url) {
	var iWidth = 1250;
	var iHeight = 700;
	var iTop = (window.innerHeight - iHeight) / 2;
	var iLeft = (window.innerWidth - iWidth) / 2;
	if (typeof (myphoto) != "undefined") {
		myphoto.close();
	}
	myphoto = window.open(url, "_blank", "menubar=0,scrollbars=1,scroll=no,resizable=0,status=1,titlebar=0,toolbar=0,location=0,width=" + iWidth + ",height=" + iHeight + ",top=" + iTop + ",left=" + iLeft);
}

四、实现总结

通过本项目，我们展示了如何使用ASP.NET WebForms结合HTML、CSS和JavaScript实现一个功能丰富的图片预览页面。这种方式不仅简单易用，而且可以满足大多数Web应用中对图片展示的基本需求。特别是通过JavaScript的动态操作，使得页面在响应用户交互时更加灵活和高效。

五、实现源码

下面是本页面的全部源码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IMGShow.aspx.cs" Inherits="WebForms.IMGShow" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>图片展示</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        .content {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: white;
            overflow: hidden;
            background-position: 50%;
        }

        .btn {
            display: inline-block;
            padding: 5px 10px;
            margin: 5px;
            background-color: aliceblue;
            border: 1px solid #ccc;
            border-radius: 4px;
            text-decoration: none;
            color: #333;
            cursor: pointer;
            font-size: 14px;
            position: relative;
            padding-left: 30px; 
        }

        .btn:hover {
            background-color: #f0f0f0;
        }

        .icon-add::before {
            content: url('images/add.png'); 
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .icon-remove::before {
            content: url('images/remove.png'); 
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .icon-arrow-turn-left::before {
            content: url('images/arrow_turn_left.png'); 
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .icon-arrow-turn-right::before {
            content: url('images/arrow_turn_right.png'); 
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
    <script type="text/javascript">
        // 放大图片
        function imgBigToSize() {
            var img = $("#bigimg");
            var oWidth = img.width();
            var oHeight = img.height();
            img.width(oWidth + 50);
            img.height(oHeight + 50 / oWidth * oHeight);
        };

        // 缩小图片
        function imgSmallToSize() {
            var img = $("#bigimg");
            var oWidth = img.width();
            var oHeight = img.height();
            img.width(oWidth - 50);
            img.height(oHeight - 50 / oWidth * oHeight);
        };

        var r = 0;
        // 左旋转图片
        function imgRotateLeft() {
            var img = $("#bigimg");
            r -= 90;
            img.css('transform', 'rotate(' + r + 'deg)');
        };

        // 右旋转图片
        function imgRotateRight() {
            var img = $("#bigimg");
            r += 90;
            img.css('transform', 'rotate(' + r + 'deg)');
        };

        // 页面初始化时加载图片
        $(document).ready(function () {
            var path = window.location.href.split('=')[1];
            $("#bigimg").attr('src', path);
        });
    </script>

</head>
<body class="easyui-layout" data-options="fit:true">

    <div style="text-align: center; vertical-align: middle;" class="content">
        <img id="bigimg" src="a.png" width="60%" />
    </div>
    <br />

    <div style="margin-top: 150px; margin-left: 50px">
        <a href="javascript:void(0)" class="btn icon-add" onclick="imgBigToSize()">放大</a><br />
        <br />
        <a href="javascript:void(0)" class="btn icon-remove" onclick="imgSmallToSize()">缩小</a><br />
        <br />
        <a href="javascript:void(0)" class="btn icon-arrow-turn-left" onclick="imgRotateLeft()">左旋转</a><br />
        <br />
        <a href="javascript:void(0)" class="btn icon-arrow-turn-right" onclick="imgRotateRight()">右旋转</a>
    </div>
</body>

</html>

标签：ASP,进阶,img,缩放,50%,left,var,页面,图片
From： https://www.cnblogs.com/liuguangzhi/p/18359400

相关文章

  • 用R做数据重塑，数据的特征缩放和特征可视化
    由于数据往往复杂多样，其中不同的特征变量可能具有不同的数值范围，这使得特征缩放成为一个必要的步骤。例如，当我们要处理医学数据时，对于同一个患者，肺活量的变化范围可能在1000到5000之间，而体重指数（BMI）的变化范围则可能在10到50之间，其他一些生理指标甚至可能处于-0.1到0.1的微小......
  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
    本文，我们将一起探讨探讨，如下所示的一个卡片Hover动画，应该如何实现：这个效果的几个难点：鼠标移动的过程中，展示当前卡片边缘的border以及发光效果；效果只出现在鼠标附近？这一块的实现方法就有很多种了，可以计算鼠标附近的范围，在范围内去实现的效果，但是这样成本太高了。转换一......
  • 精读代码，实战进阶&实践Task2
    背景从零入门AI生图原理&实践是Datawhale2024年AI夏令营第四期的学习活动（“AIGC”方向），基于魔搭社区“可图Kolors-LoRA风格故事挑战赛”开展的实践学习——适合想入门并实践AIGC文生图、工作流搭建、LoRA微调的学习者参与学习内容提要：从文生图实现方案逐渐进阶，教程......
  • 智慧校园(安校易)管理系统 FileUpAd.aspx 文件上传致RCE漏洞复现
    0x01产品简介“安校易”是银达云创公司基于多年教育市场信息化建设经验沉淀，经过充分的客户需求调研，并依据国家“十三五”教育信息化建设规范而推出的综合互联网+教育信息化解决方案。“安校易”以物联网技术为基础，以学生在校“学食住行”管理为中心，将消费管理、门禁管理、各......
  • SQL进阶技巧：利用Stack()函数进行列转行及动态列转行方法
    目录0需求描述1数据分析 2 stack()函数应用stack(intn,v_1,v_2,...,v_k)n设为3，将后面6个元素按顺序分为3行2列n设为2，将后面6个元素按顺序分为2行3列n设为3，将后面7个元素按顺序分为3行3列n设为6，将后面6个元素转为为6行1列 3小结0需求描述在hive数仓中......
  • 借助 Aspose.Words，在 Word 文档中创建表格
    Word文档中的表格是一种强大的工具，可用于以清晰、结构化的格式组织和呈现数据。表格由行和列组成，行和列相交形成可包含文本、数字、图像或其他元素的单元格。在本文中，我们将学习如何使用C#以编程方式在Word文档中创建表格。本文通过代码示例展示了在DOCX文件中创建表格的......
  • 线段树进阶 Part 1
    线段树是信息学竞赛最常见的数据结构。本篇笔记总结技巧和应用，不介绍基本线段树算法。1.常见技巧1.1信息设计用线段树解决问题，首先得考虑维护哪些信息。若不带修，任何满足结合律且封闭的信息（称为半群）都是可维护的。结合律一般都有，封闭性帮助我们设计信息。例如区间最大子段......
  • MySQL数据分析进阶（十三）高效的索引
    ※食用指南：文章内容为‘CodeWithMosh’SQL进阶教程系列学习笔记，笔记整理比较粗糙，主要目的自存为主，记录完整的学习过程。（图片超级多，慎看！）【中字】SQL进阶教程|史上最易懂SQL教程！10小时零基础成长SQL大师！！https://www.bilibili.com/video/BV1UE41147KC/?spm_id_from=333.1007.0.......
  • C语言问答进阶--4、基本运算符
    赋值运算符A：下面将介绍赋值操作符。它的符号就是 = .A：赋值操作符，就是把一个值赋值给左边的变量。正如以前说的形如a=1之类的表达就是赋值运算符的具体应用。也许有的人在编写代码的时候写过这种代码：#include "iostream.h"int main(){    int x;    1=x;......
  • Scrapy框架进阶攻略：代理设置、请求优化及链家网实战项目全解析
    scrapy框架加代理付费代理IP池middlewares.py#代理IP池classProxyMiddleware(object):proxypool_url='http://127.0.0.1:5555/random'logger=logging.getLogger('middlewares.proxy')asyncdefprocess_request(self,request,spider):......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99