1      背景介绍 & 效果展示

我们经常在电商购物时，当鼠标滑过物品展示图时，会在展示图旁边显示一个图片局部放大的效果图。本文利用OBS BrowserJS SDK上传图片对象到OBS，结合HTML5 Canvas特性可轻松实现“放大镜”效果。

效果展示页面已经托管到OBS桶，访问地址：https://static-web-chongchong.obs-website.cn-north-1.myhuaweicloud.com/

注：更多关于静态网站托管信息，可参考链接https://bbs.huaweicloud.com/forum/thread-15492-1-1.html

图1 默认图片效果展示

图2 方法一：通过上传本地图片文件进行展示

首先点击“选择文件”按钮选择本地图片文件，单击“点击上传”按钮，待按钮下方显示100%进度完成后，单击“显示图片”即可以看到展示效果。（若图片较大，加载时需要点时间，请耐心等待）

图3 方法二：通过已有的图片URL链接显示

首先在文件框中输入可用的图片URL链接，单击“显示链接图片”按钮即可以看到展示效果。（若图片较大，加载时需要点时间，请耐心等待）

注：针对已经上传到OBS的图片，其URL链接可通过OBS的“分享文件”功能获取（可参考链接https://support.huaweicloud.com/usermanual-obs/obs_03_0046.html），也可以直接在匿名可读的对象上获取URL链接（可参考链接https://support.huaweicloud.com/usermanual-obs/zh-cn_topic_0045829105.html）

2      代码参考

工具由Magnifier.html、以及子目录下Magnify的OBS BrowserJS SDK库文件、CSS文件、JS文件构成。所有的代码可在打开效果展示页面后（访问地址：https://static-web-chongchong.obs-website.cn-north-1.myhuaweicloud.com/），浏览器中打开F12调试页面获取。

3      附录链接

OBS BrowserJS SDK 下载和使用，官网参考链接：https://support.huaweicloud.com/sdk-browserjs-devg-obs/zh-cn_topic_0125029729.html