花瓣图片采集工具研究

花瓣图片采集工具不错，做了简单研究，分享给大家。如果商用，请联系花瓣网。

一、花瓣图片采集工具组成部分

花瓣图片采集工具由一个JavaScript代码（分不同浏览器）和图片保存后端两大部分组成。

核心是JavaScript代码，即https://huaban.com/js/widgets.min.js文件，大家可以直接下载。

二、代码研究

1.安装花瓣图片采集工具代码

<a href="javascript:(function(a,b,c,d){a[c]?a[c].ui.show():(d=b.createElement('script'),d.id='huaban_script',d.setAttribute('charset','utf-8'),d.src='https://huaban.com/js/widgets.min.js?'+Math.floor(+new Date/1e7),b.body.appendChild(d))})(window,document,'HUABAN_GLOBAL');" onclick="app.alert('请把按钮拖动到书签栏');return false;" class="mask-button">采集到花瓣</a>

花瓣， huaban.com等标记修改为自己的。

2.JavaScript文件，即https://huaban.com/js/widgets.min.js

从花瓣网直接下载后，通过美化工具，转成易阅读的js脚本。如果要修改这个js代码请联系花瓣网。

主要的几个核心修改点：

a.花瓣图片修改为自己的图片，涉及图片有：

http://huaban.com/img/widgets/logo.png

http://huaban.com/img/widgets/btn_close.png

http://huaban.com/img/widgets/icon_notice.png

http://huaban.com/img/widgets/widget_icons.png

http://huaban.com/img/widgets/media_video.png

http://huaban.com/img/widgets/long_image_shadow_2.png

http://huaban.com/img/widgets/icon_edit.png

http://huaban.com/img/widgets/checkbox.png

http://huaban.com/img/widgets/widget_icons_ie6.png

b.花瓣，HUABAN等标记修改为自己的

c.实现这个js文件中所有后端代码

d.这个js文件中有个难点，就是支持https网站图片的抓取，如果自己要实现，就需要搭建HTTPS应用。

 

抽空继续写……