C#如何实现图片查看器

这篇文章将简单介绍下如何使用C#来实现一个图片查看器的功能的,该工具保存的功能有:

1、 可以通过“上一张” “下一张”这样的按钮来轮换浏览图片
 2、实现对图片的旋转
 3、实现对旋转后图片的保存功能。本程序不仅提供旋转90/180/270这样的实现,同时提供一个方法来完成旋转任意角度的实现
4、该程序未实现Windows图片查看图片缩放的功能,这部分的功能主要要点是改变图片在PictureBox控件中的高度和宽度就可以的
二、实现思路
2.1 图片轮换浏览功能的实现
首先分析下第一个功能点的实现,要实现图片的轮换浏览,我们可以根据下面的思路来实现:

第一步、获得目录下所有图片的集合,此时使用Directory.GetFiles()来获得目录下所有文件,然后再对该集合进行筛选,筛选出是图片的文件,代码用扩展名进行筛选的
第二步、获得所有图片集合之后,实现图片轮换就需要改变这个集合的索引就可以实现上一张和下一张的功能了
第三步、需要考虑到最后一张或者第一张的情况下,再点击下一张或上一张图片来轮换成第一张或最后一张
思路就是上面的,有了上面的思路之后,就让我们看看具体的代码来对照理解下:

// 第一步
// 获得预览图片文件路径下的图片集合
  public static List<string> GetImgCollection(string path)
  {
   string[] imgarray = Directory.GetFiles(path);
   var result = from imgstring in imgarray
       where imgstring.EndsWith("jpg", StringComparison.OrdinalIgnoreCase) ||
       imgstring.EndsWith("png", StringComparison.OrdinalIgnoreCase)||
       imgstring.EndsWith("bmp", StringComparison.OrdinalIgnoreCase)
       select imgstring;
   return result.ToList();
  }

   // 第二步
  // 获得打开图片在图片集合中的索引
  private int GetIndex(string imagepath)
  {
   int index = 0;
   for (int i = 0; i < imgArray.Count; i++)
   {
    if (imgArray[i].Equals(imagepath))
    {
     index = i;
     break;
    }
   }

   return index;
  }

  // 切换图片的方法
  private void SwitchImg(int index)
  {
   newbitmap = Image.FromFile(imgArray[index]);
   picBoxView.Image = newbitmap;
   imgPath = imgArray[index];
  } 

  // 第三步
   // 上一张图片
  private void btnPre_Click(object sender, EventArgs e)
  {
   int index = GetIndex(imgPath);
   // 释放上一张图片的资源,避免保存的时候出现ExternalException异常
   newbitmap.Dispose();
   if (index == 0)
   {
    SwitchImg(imgArray.Count - 1);
   }
   else
   {
    SwitchImg(index - 1);
   }
  }

  // 下一张图片
  private void btnNext_Click(object sender, EventArgs e)
  {
   int index = GetIndex(imgPath);
   // 释放上一张图片的资源,避免保存的时候出现ExternalException异常
   // 经常在调用Save方法的时候都会出现 一个GDI一般性错误,主要原因是文件没有被释放,当保存到原位置时,就会出现该异常,要避免这个错误就要释放图片占有的资源
   newbitmap.Dispose();
   if (index != imgArray.Count - 1)
   {
    SwitchImg(index + 1);
   }
   else
   {
    SwitchImg(0);
   }
  }

2.2 图片旋转功能的实现
上面的代码实现了第一个功能点的问题了,下面就解释下如何实现第二个功能点——图片旋转的问题:

对于Windows自带的图片查看器,它旋转的角度只能顺时针旋转90或逆时针旋转90度,这个功能实现起来可以说非常简单,只需要使用Image.RotateFlip(RotateFlipType)方法就可以完成的,有些朋友也想对图片实现旋转任意角度,对于这个问题源码中也有具体的实现,大家可以从文章的最后下载源码进行查看,这里就不贴出具体代码的,下面就看看如何实现Windows自带的图片查看器的旋转功能的代码:

 // 顺时针旋转90度旋转图片
  private void btnRotate_Click(object sender, EventArgs e)
  {
   picBoxView.SizeMode = PictureBoxSizeMode.Zoom;

   // 顺时针旋转90度的另外一种实现
   newbitmap.RotateFlip(RotateFlipType.Rotate90FlipNone);
   picBoxView.Image = newbitmap;
   isRotate = true;
   //newbitmap = (Image)ImageManager.RotateImg(bitmap, 90f, Color.Transparent); ;
   //bitmap.Dispose();
   //picBoxView.Image = newbitmap;
  }

  // 逆时针旋转90度
  private void btncounterclockwiseRotate_Click(object sender, EventArgs e)
  {
   picBoxView.SizeMode = PictureBoxSizeMode.Zoom;

   // 逆时针旋转90度的另外实现
   newbitmap.RotateFlip(RotateFlipType.Rotate270FlipNone);
   picBoxView.Image = newbitmap;
   isRotate = true;
   // 下面是旋转任意角度的代码
   //newbitmap = (Image)ImageManager.RotateImg(bitmap, 360f-90f, Color.Transparent); ;
   //bitmap.Dispose();
   //picBoxView.Image = newbitmap;
  }

2.3 对旋转图片的保存功能的实现
最后就是针对旋转图片保存的实现了,此时我参考了Windows自带图片查看器的实现方式,因为我用Windows自带图片查看器浏览图片的实现,当我旋转图片时,它并不是实时地保存到旋转的图片的,而是当我关闭Windows自带图片查看器的时候,旋转的图片才保存到文件中的,有了这个思路之后,我就把我保存的代码逻辑放在窗体的关闭的事件处理程序中来实现的,此时保存的功能我们只需要调用Image.Save(path)方法就可以完成对图片的保存,下面就看看具体代码的实现的:

 // 关闭窗体后保存旋转后的图片到文件中
  private void Form1_FormClosed(object sender, FormClosedEventArgs e)
  {
   if (imgPath == null || isRotate == false)
   {
    return;
   }

   // 保存旋转后的图片
   switch (Path.GetExtension(imgPath).ToLower())
   {
    case ".png":
     newbitmap.Save(imgPath, ImageFormat.Png);
     newbitmap.Dispose();
     break;
    case ".jpg":
     newbitmap.Save(imgPath);
     newbitmap.Dispose();
     break;
    default:
     newbitmap.Save(imgPath, ImageFormat.Bmp);
     newbitmap.Dispose();
     break;
   }
  }

三、实现效果
上面已经介绍了实现该程序的一个思路的,朋友是不是迫不及待的想看到到底自定义图片查看器是什么样子的呢?下面就通过一个动画来让大家更形象地看到程序的运行效果的:

四、小结
到这里该文章的内容就介绍结束了,希望大家如果遇到类似的问题可以很快从这篇文章中得到解决。

(0)

相关推荐

  • 基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)

    最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m

  • Android实现的可以调整透明度的图片查看器实例

    本文以实例讲解了基于Android的可以调整透明度的图片查看器实现方法,具体如下:  main.xml部分代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"

  • 移动端js图片查看器

    本文实例为大家分享了js图片查看器插件的使用方法,制作手机使用的网页图片查看器,供大家参考,具体内容如下 这几天抽空在为项目开发一个量身的图片查看器,目前已初步完成需求. 开发场景是:在一个多文件下载展示列表中,如检测某些文件为图片时,则点击该文件时打开图片查看器展示该图片,并将列表内其它图片同时展示查看器队列内,可供前后滑动查看及其它附带功能. 乍一听功能点似乎有点多而且有些复杂,需要梳理一下 功能点整理 首先,我们要获得点击的图片文件对象及符合条件的图片文件对象集 其次,图片查看器的制作及图

  • jQuery实现简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易,代码也比较简单 图片查看器主要有几个功能: 1.显示图片和图片信息(图片名称.发布者等等) 2.切换图片 3.关闭图片查看器 初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig) picInfos: 传入图片组信息,必须,格式如

  • 手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品. 为谁而用 让移动站点的相册体验和原生App一样的设计师和开发者. 绝佳特性 PhotoSwipe提供给用户一个熟悉又直观的相册交互界面. 官方网站 http://www.photoswipe.com/ 源码示例 http://github.com/downloads/codecomputerlove/P

  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //

  • require、backbone等重构手机图片查看器

    本文是对之前的部分补充,也是对最近学习require.backbone的一次实例化的实践,希望对正在学习理解中的同学们有帮助 前文请前往:制作手机使用的网页图片查看器 新手机图片查看器 网页部分 require引入是重点,指明了主函数所在文件路径 <!doctype html> <html lang="zh-cn"> <head> <title>webapp图片查看器</title> <meta charset=&quo

  • CSS+JS构建的图片查看器

    这是一个使用 CSS + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE.Firefox .Opera. JS部分 function showPic (whichpic) {  if (document.getElementById) {   document.getElementById('placeholder').src = whichpic.href; if (whichp

  • Android仿微信朋友圈图片查看器

    再看文章之前,希望大家先打开自己的微信点到朋友圈中去,仔细观察是不是发现朋友圈里的有个"九宫格"的图片区域,点击图片又会跳到图片的详细查看页面,并且支持图片的滑动和缩放?这个功能是不是很常用呢?!那么我今天正好做了这个Demo,下面为大家讲解一下.首先按照惯例先看一下效果图吧,尤其不会录制gif动画(哎~没办法,模拟器不支持多点触控,刚好我的手机又没有Root,不能录屏,悲催啊,大家见谅,想要看真实效果的话,烦请移到文章最下方转载文章中进行源码下载,点击下载源码,运行后再看效果哈~~)

  • Android编程实现网络图片查看器和网页源码查看器实例

    本文实例讲述了Android编程实现网络图片查看器和网页源码查看器.分享给大家供大家参考,具体如下: 网络图片查看器 清单文加入网络访问权限: <!-- 访问internet权限 --> <uses-permission android:name="android.permission.INTERNET"/> 界面如下: 示例: public class MainActivity extends Activity { private EditText image

随机推荐