互动多媒体图片自适应大小的研究与实现

电子设计工程

Electronic Design Engineering

第23卷

Vol.23

第18期No.182015年9月Sep.2015

图像缩放技术实现的方法有多种，比如九宫缩放技术，就是图片4个角部分保持原样不动，4个边处只在单方向上延展的图片缩放技术。这一技术又称9-patch 、9-slice 或者

scale 9grid 、scale 9image ；线性缩放方法，就是机械的按图形

图像尺寸比例进行缩放，这种缩放技术存在的图形图像失真的特点；Seam Carving 这项技术能计算出图像上的关键部分和不重要区域，从而使得随意改变一个图像的高宽比（Aspect

ratio ）但不会让内容变得扭曲成为可能，利用这个技术可以在

图片缩放时固定其特定区域的大小，让图片缩放后仍然维持整体的完整性。在互动多媒体技术领域中，根据实际项目的需求采用其中一种合适的缩放技术[1]。

1图片缩放在多媒体技术中的重要性

在互动多媒体中，集成图形、声音和动画工具的特点使

其出现了图形图像制作的一次革命。图形图像是互动多媒体应用软件的关键元素，因为在多媒体应用领域中，它是为了提供更好的交互式体验而设计的。所以多媒体交互式系统中主要表现形式都是以图形化的[2]。

人们从视觉获得信息方式上比从其他形式上获得的信息量要大且更加的直观。获取信息的风格是用户对他们的操作环境作出反应。通过正确地选取最合适的媒体组合，可有效地实现互动多媒体应用程序的主题和目标。互动多媒体项目的设计者不得不对组织、乎衡和把图形内容和界面设计统一起来这样一些问题做出重要的决定。这包括创建所有用于表达概念、信息和情绪的视觉元素。为了能有效地做这件事，设计者或设计组将不得不制作插图、图表和图形导航工具。另外，照片、文本及颜色也常常组合在一起，这些颜色将统一整个演示画面[3]。

现代信息社会里的人们有着视觉审美性。计算机图形图像的使用变化是惊人的。图形是补充文本的视觉元素，它使显示画面信息更加的清晰或更具有操控性。为使得多媒体获得成功的设计，首要的步骤是必须制作和处理图像，使这些图形图像有着程序系统想要表达的意思或效果[4]。

在互动多媒体系统中，将用户所选择的图片，直接加载到一个设计者特定大小的容器里，如果被加载的图片大小和容

互动多媒体图片自适应大小的研究与实现

王坤

（四川信息职业技术学院信息工程系，四川广元628017）

摘要：随着信息技术和电子技术的飞速发展，多媒体显示终端已得到了广泛应用，图形图像缩放是多媒体呈现领域中一项重要的技术。由于图像的属性千差万别，大小比例基本上不一致，因此图像如何在多媒体呈现终端上自适大小便是一个值得探究的问题。常用的缩放方法有很多种，基于LINGO 图形图像处理技术，采用了图形图像重构的方式，按比例像素位拉伸图像以实现图像缩放的目的。通过对基础数据的采集，再按照对比分析后得出一些计算方法，以解决在交互式界面上图片属性大小不一致出现混乱的问题。关键词：互动多媒体；图片自适应；图形重构；交互式界面中图分类号：TN919.82

文献标识码：A

文章编号：1674－6236（2015）18-0069-03

Research and implementation of the adaptive size of interactive multimedia pictures

WANG Kun

（Sichuan Information Technology college Information Engineering Department ，Guangyuan 628017,China )

Abstract:With the rapid development of informational technology and electronic technology,terminal of multimedia display -ing has been widely applied to our life,graphic image scaling is an important technique in the field of multimedia presentation.Due to the variety of images,the basic differences of the proportion of the size,so how to make the image display on the termi -nal of multimedia displaying to the proper size is a researchable question.There are many kinds of scaling methods which have been commonly applied,this thesis is based on the LINGO graphics image processing technology which is including graphics and image reconstruction,according to the proportion of pixels a stretch image to achieve image scaling purposes,by the way of the collecting the basic data,according to some calculation methods after the comparative analyses,to expect solving the con -fused problems of the interactive interface picture.

Key words:interactive multimedia ；picture self-adaption ；graphic reconstruction ；interactive interface

收稿日期：2014-11-28

稿件编号：201411244

作者简介：王坤(1985—)，男，四川广元人，讲师。研究方向：计算机多媒体技术。

－69－

DOI:10.14022/https://www.360docs.net/doc/3d16360965.html,ki.dzsjgc.2015.18.022

器的大小及宽高一致，那么图片显示没什么畸变问题。然而图片和容器大小不一致这种情况太多了，且大部分互动多媒体系统图片呈现模式都是这样的，因此系统中需要一种图形图像自适应系统。

2图片自适应算法

图形自适应均衡器的原理就是按照某种思路和算法对其各种系数进行调整，最终使图形图像自适应均衡器的代价函数最小化，达到最佳显示效果的目的[5]。各种调整图形系数的算法就称之为图形图像自适应算法。一种算法性能的好坏可以通过几个常用的指标来衡量，例如收敛速度、误调比、运算复杂度和跟踪性能等。

图形图像自适应过程是一个不断逼近特有目标大小的过程。它所遵循的途径以数学模型表示，称为自适应算法。通常采用基于梯度的算法，其中最小均方误差算法（即LMS算法）尤为常用[6]。自适应算法可以用硬件或软件两种办法实现。前者依据算法的数学模型设计电路并集成逻辑程序，后者则将算法的数学模型编制成计算机应用程序进行实现。算法有很多种，在多媒体系统中算法的选择很重要，它决定着互动多媒体处理系统的性能质量和交互实时性。

设显示图片容器的宽度为w，高度为h，则宽度的比例为a=w

h

，被加载的图片宽度为w1，高度为h1，则宽度的比例为

a1=w1

h1

，修正后的被加载图片的宽度为w2，高度为h2。

1)a＞1的情况时，有如下5种情况图片加载：

当a1＞a时，w2=w，h2=h1×w

w1

，此时被加载的图形图像相

对显示容器更宽，更矮，因此被加载图片宽度就等于显示容器的宽度，被加载图片的高度就等于原有a的对应比例高度。

当1＜a1＜a时，h2=h，w2=w1×h

h1

，此时被加载图片相对显

示容器更高，更窄，因此被加载图片高度就等于容器的高度，被加载图片的宽度就等于原有a的对应比例宽度。

当a1＜1＜a时，h2=h，w2=h×w1

1

被加载图片的高度应等于

容器高度，被加载图片的宽度就等于原有宽高比率下的现有宽度对应的宽度。

当1=a1＜a时，此时被加载的图片为正方形，因此取容器最小值的边作为被加载图片的边长即可，其余边按照等比缩放。

当a1=a时，这时被加载图片和容器的宽高比相同，则h2=h,w2=w。

2)a＜1的情况时，有如下几种情况图片加载：

当a＜1＜a1和1=a1＞a时，此时加载的情况可以同h2=h1×w

1

。

当a1＜1时，此时加载的情况同w2=w1×h

1或w2=h×w1

1

。

当a1=a，此时加载的图片和容器宽高比率相同。

3)a=1的情况时，有如下两种情况图片加载：

当a1＞a时，w2=w，h2=w×h1

w1

,此时的图片相对容器更宽。

当a1＜a时，同上h2=h,w2=w1×h

1

。

基于Lingo语言图片自适应大小的代码见下：

--使图片按比例显示

on fitPic membername

--获得原图片的宽度

w=member(membername).width

--获得原图片的高度

h=member(membername).height

--改变图片的注册点，始终保持在中心

member(membername).regpoint=point(w/2.0,h/2.0)

bl=float(h)/w

bl1=float(maxheight1)/float(maxwidth1)

--为了解决长宽比例不一致的时候，以下代码对图片进行调整

if bl>=bl1then

sprite(membername).height=maxheight1

sprite(membername).width=w*(maxheight1/h)

else

sprite(membername).width=maxwidth1

sprite(membername).height=h*(maxwidth1/w)

end if

end

3互动多媒体中图片缩放的应用

很多时候我们需要提供这样的功能给访问者：当访问者点击页面中的缩略图时，其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。如果我们想对显示全尺寸图片的框架外观进行某些控制（比如希望框架的高度、宽度能与全尺寸图片的大小自动匹配时），则可调用fitPic方法，该方法需要接收3个参数，分别是需要打开图形图像文件的URL；该图片的高度和宽度；指定显示框架的高度和宽度。

当所有全尺寸图片都具有统一的大小时，其实程序算法实现非常简单。当每张图片的尺寸都不一样时，这种情况是无法避免的，系统必须有容错的功能和通用性，这时就需用以上代码获取每幅全尺寸图片的大小，然后在fitPic方法的特性参数中一一设置height和width为正确的值，通过函数计算即时调整Image对象的大小，并改变Image对象的注册中心点，确保图片始终保持在显示区域中间，来达到自动适应的目的。下面即是实现代码，最终处理效果对比图见图1。

--显示详细信息的函数

on showDetail

fxObj=xtra("FileXtra4").new() DGRSSetAbsolutePosition(CurrentRecord,RS)

《电子设计工程》2015年第18期－70

－

--获得图片详细参数

pic2=the moviePath&"pics\products\"&DGRSGetFieldValue("pic2",RS)

if fxObj.fx_FileExists(pic2)then member("detail").filename =pic2w =member("detail").width h =member("detail").height

member("detail").regpoint =point(w/2.0,h/2.0)if (w >maxwidth2)or (h>maxheight2)then bl =float(h)/w

bl1=float(maxheight2)/float(maxwidth2)if bl >=bl1then

sprite("detail").height =maxheight2sprite("detail").width =w *(maxheight2/h)else

sprite("detail").width =maxwidth2

sprite("detail").height =h *(maxwidth2/w)end if else

sprite("detail").height =h sprite("detail").width =w end if else

member("detail").filename =the moviepath&"pics\detail.jpg"member ("detail").regpoint =\\point (member("detail").width/2,member("detail").height/2)

end if

4

结束语

本文首先通过对几种经典算法的研究和实验验证了这些

算法，可以满足一般的图像等比例尺寸变换，但在对图像进行非等比例情况下变换时，图形图像经常会被压缩或拉伸导致图像内容发生严重的畸变，直接影响了用户的视觉效果。如果互动多媒体系统对于图像自适应要求比较高，为了有效解决非等比变换存在的畸变问题，可以采用基于图像内容的

Seamcarving 算法进行尺寸变换。得到新技术同时，多媒体程

序设计者必须知道这些媒体元素是如何呈现的，必须了解它们的能力和使用范围。参考文献：

[1]苗晴.一种自适应正则化技术的图像复原方法[J].电子设计

工程,2014(18):169-171.

MIAO Qing.Image restoration method based on adaptive regularization technology [J].Electronic Design Engineering,2014(18):169-171.

[2]马杰,王晶,黄卢在，等.Android 点菜系统中屏幕自适应的研

究与实现[J].电子技术与软件工程,2013(14):54.

MA Jie,WANG Jing,HUANG Lu -zai,et al.Research and implementation of adaptive Android ordering system of screen [J].Electronic Technology &Software Engineering,2013(14):54.

[3]向凯尧.3G 网络中图片在移动终端的自适应显示探讨[D].

海南:海南大学,2010.

[4]林庆樑.海量图片的裁剪压缩与检索[D].上海:上海交通大

学,2013.

[5]马璇.智能移动终端自适应界面的一致性研究[D].北京:北

京邮电大学,2013.

[6]谢超.自适应地图可视化关键技术研究[D].河南:解放军信

息工程大学

,2009.

图1

应用前后对比效果图

Fig.1Comparison before and after the application of the effect

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

（上接第68页）

[6]张小韬.基于AES 的密码体制的数字图像信息隐藏研究[D].北

京：北京化工大学，2013.

[7]陈燕梅，张胜元.基于AES 的数字图像置乱方法[J].中国图

象图形学报，2006，11（8）：1076-1080.

CHEN Yan-mei,ZHANG Sheng -yuan.Digital image scram -

bling method based on AES [J].Chinese Journal of Image and Graphics,2006,11(8):1076-1080.

[8]司银女.基于置乱的数字图像信息隐藏技术研究与应用

[D].西安：西北大学，2007.

王坤互动多媒体图片自适应大小的研究与实现

欢迎订阅2015年度《电子设计工程》（半月刊）

国内邮发代号：52-142国际发行代号：M2996

订价：15.00元/期360.00元/年

""""""""""""""""""""""""""""""""""

－71－