0

可以说我的博客是http://foo.tumblr.com.

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

但我希望图像的 URL 与我的博客在同一个域中，并且看起来像这样：

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

（不存在）

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

所以..我该怎么做？

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

4

1 回答 1

0

为所有帖子抓取您的站点地图并获取他们的图像。您可以在浏览器控制台中使用 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) 及其复制的 URL。

然后只需使用 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}在我上面的示例中不起作用，它是来自页面的属性，我只是指示您的哪一部分' d 想从主题中获取 HTML。

正如这篇文章中所解释的，如果您想更具体地使用正则表达式，则有一个变量可以用作比完整原始 URL 更简洁的属性。

这将有效地将您的所有图像放到您的本地 URL 上，使用类似的 URL foo.tumblr.com/images/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg，并避免跨域限制。我猜它只有在你没有大量帖子的情况下才会起作用，因为你用来存储图像的自定义页面确实对它们的大小有限制（尽管我想你可以做第二个） .

也可能是明智的，包括设置 CSSdisplay: none以防万一有人偶然发现该页面，以及到主页的重定向功能window.onload或类似功能。

于 2014-05-07T09:20:10.787 回答