Tumblr에는 블로그 이름의 동일한 도메인에 미디어 이미지 URL을 가져 오는 방법이 있습니까?

Question

내 블로그가 http://foo.tumblr.com라고합시다.

모든 게시물의 이미지

(예 : https://24.media.tumblr.com/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg) xx.media.tumblr...에 저장됩니다

(처음 2 개 번호는 생략 할 수있다)하지만 난 이미지의 URL 내 블로그의 동일한 도메인에 원하고, 무언가를 찾습니다 같은 :

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

(즉 존재하지 않는)

내가이 필요한 이유? 스크립트를 만들고 있는데 이미지에 getImageData (모두 .jpg은 건너 뜁니다.)으로 투명도가 있는지 확인하는 canvas을 생성하지만 하위 도메인이 다르므로 도메인 간 보안 오류가 발생하고 canvas이 더럽습니다. getImageData의 사용을 피하십시오.

그래서 .. 어떻게 할 수 있습니까?

Tumblr API가 유용 할 수 있다고 생각하지만 어떻게해야합니까?

Answer 1

모든 게시물에 대해 사이트 맵을 긁어 내고 이미지를 가져옵니다. 당신은 브라우저 콘솔에서 API하거나 자바 스크립트를 사용할 수 있습니다

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에 대한 통해 탐색 할 수있는 모든 게시물을 포함하는 배열을 생성합니다.

는

그럼 단순히 프로그래밍 이미지를 선택 한 후 사용할 수 newImg.setAttribute('origin') = myPhotoList[n]를 사용 origin 속성을 설정하는 루프 newImg = document.createElement('img') 대한 이미지의 새로운리스트를 생성 :

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과 같은 URL을 사용하여 모든 이미지를 로컬 URL에 효과적으로 배치하고 도메인 간 제한을 피할 수 있습니다. 나는 당신이 톤의 게시물을 사용자 정의 페이지로 저장하지 않을 경우에만 작동 할 것이라고 추측합니다. 이미지를 저장하는 데 사용할 수있는 크기가 제한되어 있습니다 (두 번째로 만들 수 있다고 생각하지만 하나).

아무도 페이지를 우연히 발견하면 CSS를 display: none으로 설정하고 window.onload 또는 이와 유사한 홈페이지로 리디렉션 기능을 포함시키는 것이 좋습니다.