OBS BrowserJS SDK 实践1:结合HTML5 Canvas实现图片局部放大效果

举报
chongchongly 发表于 2019/06/27 16:00:47 2019/06/27
【摘要】 1 背景介绍 & 效果展示我们经常在电商购物时,当鼠标滑过物品展示图时,会在展示图旁边显示一个图片局部放大的效果图。本文利用OBS BrowserJS SDK上传图片对象到OBS,结合HTML5 Canvas特性可轻松实现“放大镜”效果。效果展示页面已经托管到OBS桶,访问地址:https://static-web-chongchong.obs-website.cn-north-1...

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 默认图片效果展示

图片.png

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

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

图片.png

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

图片.png

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


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。