图片保存工具

上周四突然看到Dropbox新发布的javascript的api，能够快速向Dropbox保存文件。就像试一试，并且鉴于最近使用的火狐ScrapBook插件出了问题（以前能保存整个网页，现在只是保存网址，大概看了设置好像也不能做更改-_- ）于是就想写个保存图片的小东西。参考Instapaper的书签代码，有了以下版本。

ps:开发阶段还没有做通用化处理，但是已经有idea啦。至于测试网站么，1024 :)

function load(){
    var d = document,
    jq=d.createElement('scr'+'ipt'),
        b = d.body,l=d.location;
    var dp=d.createElement('scr'+'ipt');
    jq.setAttribute('src',l.protocol+
        '//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js');
    dp.setAttribute('src',l.protocol+
        '//www.dropbox.com/static/api/1/dropins.js');
    dp.setAttribute('id','dropboxjs');
    dp.setAttribute('data-app-key','*******');
    b.appendChild(jq);
    b.appendChild(dp);
}
function save1024(){
var plist =$($('div#main div.tpc_content')[0]).find('input');
var files=[];
for(var i=0; i < plist.length; i++){
    files.push({'url':plist[i].src});
}
options={'files':files};
Dropbox.save(options);}
load();
save1024();
void(0)

这段代码的关键是动态加入javascript元素后，其内容会自动执行。这段代码有一个问题是，将其保存为书签后，只有第二次点击才真正有作用。原因是为了方便选取图片元素，加载了jquery，而它需要一定时间才能载入。第二个问题是dropbox提供的api不能提供默认位置，只能选取而且不能新建文件夹。但是我的想法是能自动保存到一个地址，并且自动创建文件夹来存储图片。

所以有了第二个版本，思路是前端post图片的地址到服务器，服务器下载后上传到dropbox。这样很费流量，但是目前也只能这样了。服务器端是flask接受post数据然后传给一个专门下载上传的服务，他们通过socket通讯。

其中花费了不少时间的问题是跨域提交，起初是想在不可见iframe里面通过js进行post，后来发现instapaper是通过form来post数据的，而且这也确实简化了不少，所以有了如下代码：

function save1024(){
    f = document.createElement('iframe');
    f.setAttribute('name', 'f%s');
    f.setAttribute('allowtransparency', 'true');
    f.setAttribute('style', 'border: 0; width: 1px; height: 1px; position: absolute; left: 0; top: 0;');
    document.body.appendChild(f);
    window.frames['f%s'].document.write(
        '<html><body style=""background-color:transparent;">' +
        '<form action="http://localhost:5000/api/saver" method="post" id="form" accept-charset="utf-8">' +
        '<input type="hidden" name="data" id="data" value="">' +
        '</form>' +
        "<scr" + "ipt>function save(datas){var i = document.getElementById('data');" +
        "var f=document.getElementById('form'); i.value=datas; f.submit();}" +
        "</scr" + "ipt></body></html>"
    );
}

这段代码是插入一个透明iframe，内含一个表单和一个用来设置表单值和除法提交时间的函数，经测试能够工作（至少小量数据没问题）。

后端的功能也都差不多了，修改下然后做个好界面应该就可以啦，期望这周末能成成品。关于图片的选取，目前是想给潜在用户（估计就我自己，最多几个朋友吧）提供自定义的设置，即在客户端可以自己提交针对不同网站的jquery选取代码。当然还设想了增加鼠标点选的功能，不过这些如果有需要再慢慢增加吧。