2020年10月 天水师范学院学报 Oct . ,2020
第 40 卷第 5 期_______________Journal  of  Tianshui  Normal  University __________________V 〇1.40 No .5
一种基于G D 2和C a n v a s 的超大图像处理与显示方法
李忠明，余梓唐，黄秀常
(义乌工商职业技术学院机电信息学院，浙江义乌322000)
摘要：越来越多的w eb 应用涉及超大图像的在线浏览问题。提出一种基于PH PG D 2和HTM L5Canvas 的超
大图像切割加载显示方法，利用PH PG D 2实现超大图像的切割并构建不同分辨率的图像金字塔，利用HTML5 Canvas 加载拼接显示不同层级图像块，实现超大图像的显示、移动和缩放，采用该方法实现了 B /S 结构的超大 图像在线浏览系统。应用结果表明，该方法能有效缩短系统开发时间，在普通网络环境下即可实现流畅地浏览超 大图像。
关键词：GD2; C a n v a s ；超大图像；图像金字塔 中图分类号：TP311.1
文献标识码：A
图像的浏览通常是通过本地专门的图像浏览 软件实现的。但对于超大图像，如超高清晰度 的医学切片图像，图像文件本身的空间体积往 往达到数百甚至数千M B ，采用本地图像浏览软 件浏览此类图像，会导致图像加载、缩放显示 速度变的极慢，甚至发生系统崩溃。同时，在 多数情况下，这些超大图像往往是商业化的，不能下载到本地进行浏览，只能通过web 应用在 线浏览。
越来越多的web 应用涉及超大图像的在线浏 览问题，针对不同应用场景下的超大图像在线浏 览问题，目前有各种解决方案。一种基于四叉树 虚拟显示的超大容量图像的浏览方法，111该方法采 用金字塔数据结构布局和四叉树索引，实现了全 切片数字病理扫描图像的平移、缩放等操作；一 种通过网络即时浏览超大图像的方法，121该方法将 超大图像切割成若干小块图像上传到服务器端，用户通过客户端浏览图像某个区域，从图像存储 服务器获取组成该区域的小块图像数据，实现网 络即时浏览超大图像；一种使用W e b G L 技术的超 大图像的切割加载显示方法，131该方法将超大图 像切割后转换为M 个WebGL  Texture 对象，并分别 显示在M 个对应的显示区域，实现了超大图像在 显示终端的快速加载、缩略图显示和局部放大。针对图像数据的实时传输问题，有学者从2D 、3D 图像的绘制与动态效果实现方面对Canvas 、Web -收稿日期：2020-09-21
作者简介：李忠明（1962-)，男，甘肃天水人，义乌工商职业技术学院机电信息学院教授。
基金项目：义乌工商职业技术学院重点科研项目“基于〇02和(^>™^的超大图像在线浏览系统研发”（ZD2020JD052-01)阶段性成果
文章编号：1671-1351 (2020) 05-0039-04
G L 技术进行了研究实践，并提出采用WebSocket 技术解决图像数据的实时传输问题。141以上方法都 需要针对特定的图像对象进行像素级别的大量基 础性编程，工作量非常大，不适合一般的web 应 用场景。
本文提出一种基于PHP  G D 2和H T M L 5 Canvas 的超大图像处理与显示方法，利用P H P G D 2实现 超大图像的切割并构建不同分辨率的图像金字 塔，利用H T M L 5 Canvas 加载、拼接、显示不同层 级图像块，利用P H P 和JS 编程实现超大图像的移 动和缩放，超大图像的处理和在线浏览无须像素 级编程。
1图像切割及图像金字塔构建
图像金字塔用于图像编码和渐进式图像传输， 是一系列分辨率逐渐降低的图像集合，如图1所 示，其底层是图像的高分辨率表示，对应原始图 像，顶层是图像的低分辨率的近似表示，对应图像 缩略图。在超大图像在线浏览应用场景下，采样比 例拟设计为4比1，既可以保证采样时方便计算， 也可以方便
上下层之间建立父子关系；分块大小 取2的幂次方，具体可依据显示终端操作系统数据 存储格式、内存管理最小单位以及终端显示区域大 小来确定，一般采用 64x 64、128x 128、256x 256、 512x 512等正方形分块。
39
GD2是PHP的图像扩展库，包含了大量图像处 理 API，[5]目前支持GIF、JPEG、PNG、XBM、XPM、WBMP、WebP、BMP等格式的图像文件。GD2的Imagecopyresampled函数通过重新采样可以 将源图像src_image中左上角坐标为(src_x,src_y)的 src_wXsrc_h区域拷贝到目标图像dst_image的(dst_x, dst_y)开始的dst_wxdst_h区域，实现图像的切割：Imagecopyresampled(dst_image,src_image,dst_x, dst—y，src_x，src_y，dst_w,dst_h,src_w,src_h)
在超大图像在线浏览应用场景下，dst_x= dst—y=0, dst_w=dst_he(64,128,256,512)都取为固定 值；切割第0层图像时，src_w=dst_w，src_h= dst_h，以（src_x，src_y)为左上角坐标、src_wXsrc_h 为正方形切块大小，遍历整幅源图像即可得到全部 切块。对于任意第k层图像的切割，src_w=2kx dst_w，src_h=2k xdst_h，通过与第0层切割相同的 遍历方法得到第k层全部切块；或者利用Image-copyresampled函数将源图像按缩放比l/2k先缩小为 第k层缩略大图，再将第k层缩略大图当作第0层 图像切割，保持各层挖取区域大小始终相同。两种 算法实现的切块图像质量相同。
给定超大图像filelmage、客户端显示区域宽X 高=wCanvasXhCanvas和切块宽X高=wCutxhCut，图像金字塔各层级每行切块数量m可通过wlmage/ wCut计算获得，每列切块数量n可通过hlmage/ hCut计算获得，其中wlmage和hlmage分别是图像 filelmage的宽和尚，可通过G D2的getimagesize函数 获取。实际应用中，并不能保证wlmage/wCut和 hlmage/hCut的计算结果为整数，应向上取整，且 每竹最后一■个切块（第m列切块）和每列最后一个 切块（第n行切块）一般都不足给定的切块面积大 小，其实际切块大小应取为剩余大小，即wCuti.…= wCanvas- x C u t i,m ,hCut…j= hCanvas- yCut…,j，其中 ie [0，n],je[0，m],xCutim是第m歹丨j切块左上角x坐标，yCuk是第n行切块左上角y坐标。
图像金字塔最大层级数max依据客户端显示区 域的大小确定，原则是保证该层级缩略大图（该层级所有切块拼接的图像）刚好能全景显示于显示区
域。具体算法是：在从第〇层向上遍历金字塔层级
过程中，第一个满足以下条件的层级数即为金字塔
最大层级数：
n n
svg和canvas的区别^wCut,m$wCanvas n^/iCut…,^/iCanvas ,
i=0 ;=0
以jPg图像格式为例，超大图像的切割和金字
塔构建基本算法表示如下：
⑴读入超大图像filelmage到image对象
image= imagecreatefromjpeg(filelmage);
(2)获取图像宽wlmage、局hlmage和mime类型
list(wlmage,hlmage,mime) = getimagesize(filelm-age)；
(3)遍历金字塔全部层级
for(k=0, wThumb>= wCanvas I I hThumb>= hCan­vas,k++ ){
wThumb=wImage/2k;//第 k层缩略图宽
hThumb=hImage/2k;//第 k层缩略图局
thumb =imagecreatetruecolor(thumb_width,thum-
b_height);//第k层缩略图
imagecopyresampled(thumb,image,0,0,0,0, wThu­mb,hThumb,wThumb,hThumb);
转第(4)步执行切割分块；}
(4) 遍历所有切块（xCut和yCut为切块左上角 坐标）
for(xCut=0，xCut< wThumb,xCut+= wCut){
for(yCut=0，yCut< hThumb,yCut+= hCut){
w=(wThumb—xCut < wCut) ?wThumb- xCut : wCut; //切块宽
h=(hThumb—yCut < hCut) ?hThumb- yCut : hCut;//切块高
img=imagecreatetruecolor(w，h); //实施切块
imagecopyresampled(img,thumb,0,0, xCut,yCut,
w,h,w,h);
filelmg= k一xCut一yCut.jpg; //切块保存为文件
并输出
header(M Content-type:mime H);
imagejpeg($newimg,$dstimg);}}
图像金字塔各切块图像文件以k_ xCut_ yCut
形式命名，k表7K金字塔层级，xCut和yCut表7K该
切块在缩略大图中的位置坐标。实际开发中，图像
金字塔数据同时保存在数据库中，至少包括切块的
层级、大小、位置坐标、文件路径等。
客户端显示区域需要进行图像的平移和缩放操
作时，可以直接利用PHP的文件系统函数获得该图
像金字塔所有切块的层级及位置信息，通过这些信
40
息实现必要切块的识别、查、加载和拼接。还可 以将图像金字塔信息写入数据库，写人的信息至少 包括切块的层级、大小、在缩略大图中的位置、磁 盘路径等，需要时从数据库中读出，实现图像块更 快速识别、查、加载和拼接，以保证超大图像在 线浏览的流畅性，增强用户体验。
2图像块的加载和显示
Canvas是HTML5的両布，包含大量图形图像 处理API，配合以JS来绘制2D图形图像并逐像素 渲染，实现图像块的动态加载和显7K。Canvas对象 支持脚本化客户端绘图操作，使用其getContext方 法可以创建CanvasRenderingContext2D对象(CTX)，通过CTX就可以实现对Canvas对象的像素 数据操纵。CTX对象的drawlmage方法可以将图像 切块写人Canvas对象，实现切块图像的显不；CTX 对象的getlmageData方法可以获取Canvas画布上已 显示的图像数据对象ImageData，通过ImageData对 象的putlmageData方法，可以将图像数据写回Can-vas_布。
2.1图像块加载拼接算法
HTML页面上Canvas18〗布构成了客户端显本区 域，图像块的加载拼接就是将服务器端的金字塔图 像切块写人到Canvas画布的适当位置，呈现出超大 图像的部分或者全部图像以供用户浏览。基本算法
涉及创建脚布Canvas对象，创建CanvasRendering-Context2D对象 ctx，创建 ImageData对象 Image，加 载图像切块ImageDataURL，将图像切块写人Can-vas画布，实现图像块的加载和拼接：
canvas= $("#canvas");//创建Canvas对象
Context(”2d"); //创建 ctx对象
Image=new Image〇;//创建图像对象
Image.src= ImageDataURL;//加载图像切块
ctx.drawlmage(lmage,x,y,w,h);}
其中（x，y)为图像块拼接点位置（图像块左上 角在Canvas_布上的坐标），w和h为图像块实际 呈现的宽度和高度，可以取w=wCut,h=hCut，按 1比1比例写入，无须缩放。实际应用中，为了增 强用户体验，可以针对不同的超大图像设定不同 的缩放比r，取w=rx wCut，h=rXhCut，对同一图 像，r为常量。
图像块加载和拼接的核心是拼接点位置计算和 拼接哪些图像块。只需确定位于Canvas画布左上的 第一个拼接点U,y)，其余各拼接点可通过递增确定：x=x+W，y=y+h。在超大图像在线浏览应用场景 下，初始加载拼接到显示区域Canvas上的是金字塔 最高层级切块，该层级全部切块都被加载且全部呈 现于Canvas内部，拼接后的图像在Canvas中居中 显示，其第1个拼接点的算法如下：
wCanvas- ~^wi m 丨，
随着后续用户的平移和缩放操作，第1个拼接 点可能位于Canvas外部，实际位置需要叠加每次平 移和缩放操作的影响，具体在平移和缩放算法中描 述。需要说明的是，拼接到Canvas边界附近的图像 块会横跨Canvas画布的边界，有一部分位于边界之 外，边界外部分并不需要呈现。横跨Canvas边界的 情形可以归纳为8种：横跨左边界，横跨右边界，横跨上边界，横跨下边界，同时横跨左边界和上边 界，同时横跨上边界和右边界，同时横跨右边界和 下边界，同时横跨下边界和左边界。传统的处理方 法是裁切掉图像块位于边界外的部分，重新计算拼 接点，这种方法增加了编程的复杂性并影响拼接速 度。更好的解决方案是只对横跨左边界和上边界的 图像块，将其拼接点置于显示区域外部，其余横跨 边界的情形无需任何处理，Canvas会自动裁切掉位 于显示区域外的图像。
需要加载拼接的图像块总是对应图像金字塔的 某一层级，放大操作对应当前层级减1，直到第0 层级LevelO；缩小操作对应当前层级增1，直到最 高层级LevelMax；平移操作时层级不变，保持为当 前层
级。由于Canvas中初呈现的是超大图像的全景 缩略图，对应图像金字塔最高层级LevelMax，需要 加载该层级的全部图像块。随着用户不断的平移和 缩放动作，所需加载拼接的图像块需要重新计算，具体在平移和缩放操作中描述。
2.2图像的平移和缩放算法
基本思想是利用CTX的getlmageData方法先获 取当前Canvas L田i布上的图像对象ImageData，利用 ImageData对象的 putlmageData方法，或者 CTX的 drawlmage方法，将 ImageData重新写入Canvas _布；Canvas画布上空缺部分调用图像加载拼接程序 予以补足。
平移算法。主要包括获取Canvas对象，创建 CanvasRenderingContext2D 对象CTX、创建丨mage-Data对象、将ImageData重新写回Canvas圆布。重 新写人时的水平偏移量dx、垂直偏移量dy取用户 平移操作动作的实际偏移值。算法列示如下：
41
canvas= S(M#canvas M);
Context(M2d");
ImageData= ImageData(0,0,wCanvas, hCanvas);
ctx.putImageData(ImageData,dx,dy);
假定平移前Canvas第1个拼接点为（x,y)，对 应的金字塔切块为k_X Cut_yCU t，平移偏移量为dx 和dy，则平移后，第1个拼接点x=x-ceil((x+dx)/w) *w，y=y_ceil((y+dy)/h)*h，对应的第1个金字塔切块 为 k=k，xCut= xCut-ceil((x+ dx)/wCut)*wCut,yCut= yCut-ceil((y+dy)/hCut)*hCut〇
缩小算法。与图像金字塔构建方法相匹配，采 用中心缩放方法，按缩放比2比1缩小，ImageData 取Canvas上全部图像数据；重新写入ImageData时 保持写入的图像在Canvas中居中显7K。算法列
如下：
canvas= $(M#canvas");
Context("2d");
ImageData= ImageData(0,0, wCanvas, hCanvas);
ctx.drawImage(wCanvas/4,hCanvas/4,wCanvas/2, hCanvas/2);
ctx.drawImage(wCanvas/4,hCanvas/4,wCanvas/2, hCanvas/2);
放大算法。与图像金字塔构建方法相匹配，仍 然采用中心缩放法，按缩放比1比2放大，以Canvas 中心点为中心，ImageData取Canvas中宽x高=wCan-vas/2xhCanvas/2的矩形区域图像数据，其左上角坐 标为（wCanvas/4，hCanvas/2)。算法列7K如下：canvas= S(M#canvas M);
Context("2d M);
ImageData(wCanvas/4, hCanvas/4,(wCanvas/2,hCanvas/2);
ctx.drawImage(0,0,wCanvas,hCanvas);
缩放（缩小或放大）后，仍然需要调用图像块 加载拼接程序完成局部图像刷新，其第1个拼接点 (X，y)以及对应的金字塔切块k_xCut_yCut的计算 方法与平移时相类似。实际应用中，获取Canvas画 布上当前图像数据，还可利用Canvas对象的toData-URL方法实现，其中MIME type是形如image/png格 式的字符串。
function convertCanvasToImage(canvas){
DataURL= new Image〇;
DataURL.src= DataURL(MIME type);
return DataURL;}
封装函数中DataURL是对应其MIME格式的一串Base64编码的URL，可使用CTX的drawlmage实
现重写；而ImageData中存储的是Canvas对象的像
素数据，采用8位无符号整型固定数组Uint8C-lampedArray结构。实际应用中，可根据应用场景
的不同选择使用。
3方法应用及结论
采用本文所述方法，在PHP+MySQL+Apache环
境下开发了超大图像在线浏览系统。系统能自动对
上传的超大图像进行切割分块、构建图像金字塔并
将金字塔切块信息保存在数据库中。图像的切割使
用了 PHP的GD2图像扩展，金字塔切块的传送采用 AJAX技术实现，客户端图像呈现使用了 HTML5 Canvas画布。最初在客户端呈现的是超大图像的全
景缩略图，用户的任何平移和缩放操作，都会自动
触发图像块的重新加载和拼接。由于无须进行像素
级编程处理图像，有效提高了开发效率。
为追求超大图像在线浏览的平滑性，图像金字
塔需要在浏览请求前预先构建。一幅超大图像的金
字塔文件集合所占用的空间体积，一般是源图像的
5-10倍。为减少服务器空间资源开销，可适当减
少金字塔层级数，也可以考虑在有浏览请求时实时
构建图像金字塔，但客户端会出现明显的等待，影
响用户体验。实际开发中，切块大小最好采用2m x
2m,me[6, 9]，具体根据源图像大小和层级数多少
进行选择，对同一幅图像各层级切块大小应保持相 同。第0层最右边和最下边切块，不足一个切块大
小时，切块实际大小仍然要遵循2的幂次方的原 则，可降低幂次，按就近原则舍弃或者补足像素。
参考文献：
[1]关新平，吴开杰，谷朝臣.基于四叉树虚拟显示的超大容量
图像的浏览方法及系统：中国，CN201710901287.9
[P].2018-02-09.
[2]陈剑锋，赵宇.一种通过网络即时浏览超大图像的方法：中
国，CN201310565047.8 [P].2014-02-05.
[3]彭志勇，刘志鹏.超大图像的切割加载显示方法：中国，
CN201710692599.3 [P].2017-08-14.
[4]李龙.基于HTM L5技术的实时图形图像处理研究[J].信
息通信，20丨7,(6):134-135
[5] The PHP Group.Image processing and GD:GD and image
functions [EB/OL].(2019-11-14) [2020-03-25].
www.php/manual/zh/book.image.php.
〔责任编辑高忠社〕
〔校 对任广灵〕
42

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。