[JavaScript] 写了个可以解决因防盗链而图片无法显示的程序

[复制链接]

轻舟过

该用户从未签到

258 主题	314 好友	3万积分

第二章

积分: 35715

发表于 2012-10-3 13:34:20 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要登录才可以下载或查看，没有账号？╱人◕‿‿◕人╲订下契约（注册新用户）

本帖最后由轻舟过于 2012-10-3 13:43 编辑

第一次发自己做的东西

转载一篇包含许多图片的文章到技术宅是一件很麻烦的事，因为许多网站有防盗链机制，直接复制粘贴的结果是所转载的内容中的图片全挂掉了。所以我需要把文章中所包含的图片都传到点点或者其他图床上去，然后再将文章的图片链接一张张替换成新的链接，感觉这样太麻烦了，于是花了点时间写了点代码，让“传图片到图床->替换图片链接”的操作自动化。
ps：使用的是imgur的服务，由于是国外的，速度上虽然比不上点点，不过个人觉得还是可以接受的。

工具采用的是小书签的形式，如果不知道什么是小书签，可以看一下之前的一篇文章
自己测试了下chrome、firefox都可以正常使用，其他浏览器不知道行不行，征人测试下。

安装方法：新建一个书签，在网址一栏中填入以下代码，名称可以随自己喜好随便取只要自己认得就好。
[mw_shl_code=text,false]javascript:(function(){ _my_script=editdoc.createElement('SCRIPT'); _my_script.type='text/javascript'; _my_script.src='http://jsbin.com/welcome/29583.js?x'+(Math.random()); editdoc.getElementsByTagName('head')[0].appendChild(_my_script);})();[/mw_shl_code]

使用方法：在发表帖子的页面上（高级模式）点一下刚刚保存的小书签，就会将编辑框中的图片都上传到imgur，然后替换掉图片链接，完成之后会弹出一个提示"done!"。

注意事项：
1. 由于imgur的接口限制，一个小时内只能处理50张图片，一般人应该够用了吧～～
2. 这个工具目前只能用于本论坛
3. 由于自己的javascript学得很渣，另外急于写出一个大致能用的程序，没有写错误处理的代码，应该会有许多bug，如果发现了就告诉我吧。

代码说明：安装方法部分的代码实际上是在html文档中插入一个script节点，然后调用所包含的js文件 http://jsbin.com/welcome/29583.js
29583.js中的代码也很简单，只有二十多行，也就是调用了一下imgur的上传图片的api，上传完成之后从应答json中取得新的图片链接替换掉原始的链接
[mw_shl_code=javascript,true]function process(idx, xhr, isLast) {
  return function(){
if (xhr.readyState==4 && xhr.status==200)
{
   document.images[ idx ].src = JSON.parse(xhr.responseText).upload.links.original;
   if(isLast)
      alert("done!");
}
  };
}
for(var i = 0; i < document.images.length; ++i) {
  src = document.images[ i ].src;
  var fd = new FormData();
  fd.append("image", src); // Append the file
  fd.append("type", "url");
  fd.append("key", "77c69b52f7992b9996a2cf963eee4651");

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=process(i, xhr, i == document.images.length - 1);
  xhr.open("POST", "http://api.imgur.com/2/upload.json", true);
  xhr.send(fd);
}[/mw_shl_code]

博客什么的求人气 http://bimania.org

合作站点账号登陆

[JavaScript] 写了个可以解决因防盗链而图片无法显示的程序

╱人◕‿‿◕人╲定下契约