Question

假设我的博客是http://foo.tumblr.com。

所有帖子的图片都存储在xx.media.tumblr...中（例如：https://24.media.tumblr.com/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg）（可以跳过前2个数字）

但我希望图片的网址位于我博客的同一个域中，看起来像这样：

http://foo.tumblr.com/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg

（不存在）

为什么我需要那个？我正在创建一个脚本，它会生成一个canvas来检测图片是否具有getImageData的透明度（所有.jpg都被跳过），但由于子域名不同，我得到了跨域安全性错误，canvas被污染，无法使用getImageData。

那么......我怎么能这样做？

我认为Tumblr API可能有用，但是如何？

Answer 1

为所有帖子抓取您的站点地图并获取他们的图片。您可以在浏览器控制台中使用API或仅使用Javascript：

xmlin = prompt(); // view-source:biochemistri.es/sitemap1.xml
parser = new DOMParser();
xmlDoc=parser.parseFromString(xmlin,"text/xml");
xmlDoc.querySelectorAll('loc')[0].remove();
posts = xmlDoc.querySelectorAll('loc');
postlist = [];
for (i=0;i<posts.length;i++) {postlist.push(posts[i].innerHTML)};

...生成一个包含所有帖子的数组，可以浏览照片帖子（div.post.photo）并复制其网址。

然后只需生成一个带有for循环和newImg = document.createElement('img')的新图像列表，使用origin设置newImg.setAttribute('origin') = myPhotoList[n]属性，然后可以使用该属性以编程方式选择图像：

document.querySelector("img[origin='"+{PhotoURL-HighRes}+"']"

（或{PhotoURL-1280}，{PhotoURL-500}，{PhotoURL-250}等。通过XMLHttpRequest检索后，您只需切换DOM中的帖子。上面示例中的{PhotoURL-HighRes}不会工作，它是页面中的一个属性，我只是指出你想从主题HTML中获得哪个部分。

如this post中所述，如果你想对正则表达式更具体一些，那么有一个变量可以用作比完整原点URL更简洁的属性。

这样可以有效地将所有图片放到您的本地网址上，使用foo.tumblr.com/images/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg等网址，并避免跨网域限制。我猜它只有在你没有吨的帖子时工作，因为你用来存储图像的自定义页面确实有限制它们的大小（虽然我想你可以制作第二个）。

包含CSS以设置display: none以防万一有人偶然发现页面，以及使用window.onload或类似内容的重定向功能到主页时，也可能是明智的。

Tumblr有一种方法可以在博客名称的同一域中获取媒体图像URL吗？

1 个答案: