网页端实现大尺寸图片的查看、放大缩小、标记标尺等功能

前段时间接到任务，主要实现网页端查看病理图片（图片很大），并能够在图片上进行标注和刻度显示，对于其他各种辅助功能，参考成熟的网站。网站地址：http://image.kfbio.cn/HTML5/SeadragonViewer.aspx?SlideID=346，大家可以先睹为快。而对于如何实现，却是没有一个可以拿来就用的例子或框架，作为前端小白、代码的搬运工，参考各种教程、博文、以及开源的web库等资源，将这些组合起来，搭建了一个算是可以跑的小车。作为阶段性结果，将其展示出来，也希望能对类似需求的同学有所帮助。

demo传送门：demo

先睹为快：

所要使用的开源web库：OpenSeadragon；关于这个库的入门介绍：学习OPENSEADRAGON之一

关于这个库，所用的插件有：

• openseadragon-fabricjs-overlay.js 矩形、圆形、直线等标记用；
• openseadragon-scalebar.js 刻度显示用。

用到fabric.js框架，主要参考博文fabric.js和高级画板，进行各种图形的绘制。

本来是想用Bootstrap开源框架的，但因某些原因，就没有用，但对这个框架的也有所了解，做出来的网站的确漂亮。

还有很多其他博文、网站、教程等就不一一列举，一并表示感谢。

本人已将所有实现代码及资源上传GitHub，有兴趣欢迎查看。

当然也有很多不足，比起成熟的网站实现的数万行代码，我做的还太单薄，没有考虑的也太多太多，但作为一个简单的实例演示，还请大家多多包涵、多多指教！