HTML5 Canvas绘图技术及其在图像裁剪中的应用研究
|
摘要
Canvas作为HTML5的特性元素之一,以其强大、高效的绘图特性被广泛应用于客户端的图像处理及游戏开发中.相比之前的VML及SVG,Canvas是一种基于像素的绘图技术,它不依赖插件,使用get Context("2d")结合绘图API即可实现图形图像的绘制和处理.利用Canvas的客户端图像处理的特性,通过获取移动、滚轮缩放图像前后实时坐标差及缩放比例,结合draw Image()在目标画布绘制出剪裁图像,最后使用to Data URL()保存为本地图片,实现了指定区域的剪裁功能,有效减轻了服务器压力,有着较好的应用前景.
Canvas,one of the key elements featured in HTML5,is widely used in client-side image processing and game development.Compared with previous VML and SVG.Canvas is a pixel-based and plug-in independent graphical technology.Image rendering and processing can be implemented with get Context("2d") and graphical API.Based on client-side image processing of canvas,by real-time capturing coordinate differences and scaling proportions before and after movement and mouse wheel scrolling,clipped images are rendered on target canvas with draw Image().And the clipped images are saved locally with to Data URL().This method implements the clipping of target area,reduces the server load and thus has good prospects.
Canvas,one of the key elements featured in HTML5,is widely used in client-side image processing and game development.Compared with previous VML and SVG.Canvas is a pixel-based and plug-in independent graphical technology.Image rendering and processing can be implemented with get Context("2d") and graphical API.Based on client-side image processing of canvas,by real-time capturing coordinate differences and scaling proportions before and after movement and mouse wheel scrolling,clipped images are rendered on target canvas with draw Image().And the clipped images are saved locally with to Data URL().This method implements the clipping of target area,reduces the server load and thus has good prospects.
引文
[1]刘耀钦.利用HTML5拖放技术实现多文件异步上传[J].四川理工学院学报:自然科学版,2015,28(1):17-20,30.
[2]黄永慧,陈程凯.HTML5在移动应用开发上的应用前景[J].计算机技术与发展,2013,23(7):207-210.
[3]Geary D.HTML5 Canvas核心技术图形、动画与游戏开发[M].北京:机械工业出版社,2013.
[4]朱文.基于HTML5Canvas技术的在线图像处理方法的研究[D].广州:华南理工大学,2013.
[5]常齐,钟勇.基于VML、SVG的矢量图形架构[J].计算机应用,2009,29(6):288-291.
[6]孙大雷.基于像素小基团增强的网络课件图像清晰化算法[J].科技通报,2013,29(10):115-117.
[7]梁宏锟.位图矢量化转换技术的研究[D].长春:吉林大学,2013.
[8]刘丹,李刚,田银枝,曹红杰.利用VML和SVG绘制军标箭头符号的算法实现[J].测绘科学,2014,39(4):115-118,130.
[9]蒋媛园,武延军.面向远程虚拟桌面的应用程序推送技术研究[J].计算机科学,2013,40(5):31-34.
[10]潘杰,周传生.基于JQuery框架的Web研究与实现[J].沈阳师范大学学报:自然科学版,2015,33(1):96-99.
[11]栗少萍.NET平台耦合Silverlight的图像系统开发[J].山东农业大学学报:自然科学版,2015,46(1):106-109.
[2]黄永慧,陈程凯.HTML5在移动应用开发上的应用前景[J].计算机技术与发展,2013,23(7):207-210.
[3]Geary D.HTML5 Canvas核心技术图形、动画与游戏开发[M].北京:机械工业出版社,2013.
[4]朱文.基于HTML5Canvas技术的在线图像处理方法的研究[D].广州:华南理工大学,2013.
[5]常齐,钟勇.基于VML、SVG的矢量图形架构[J].计算机应用,2009,29(6):288-291.
[6]孙大雷.基于像素小基团增强的网络课件图像清晰化算法[J].科技通报,2013,29(10):115-117.
[7]梁宏锟.位图矢量化转换技术的研究[D].长春:吉林大学,2013.
[8]刘丹,李刚,田银枝,曹红杰.利用VML和SVG绘制军标箭头符号的算法实现[J].测绘科学,2014,39(4):115-118,130.
[9]蒋媛园,武延军.面向远程虚拟桌面的应用程序推送技术研究[J].计算机科学,2013,40(5):31-34.
[10]潘杰,周传生.基于JQuery框架的Web研究与实现[J].沈阳师范大学学报:自然科学版,2015,33(1):96-99.
[11]栗少萍.NET平台耦合Silverlight的图像系统开发[J].山东农业大学学报:自然科学版,2015,46(1):106-109.