개시하다

저는 평소에 Exact Audio Copy를 사용해서 음악을 즐깁니다.
아이튠즈 같은 앨범 아트 이미지를 자동으로 삽입하는 소프트웨어가 없기 때문이다
인터넷 어딘가에서 그림을 찾아 파일에 수동으로 삽입합니다.
애플뮤직은 당시의 이미지 소스로서 매우 우수하다는 느낌을 주는 사이트다.
수주한 앨범 장수가 풍부하고 예술 작품의 화질이 평균적으로 좋기 때문이다.

과제.

브라우저에서 Apple Music 포토 앨범 페이지만 열면 이미지를 저장할 수 없습니다.
이미지 컨텍스트 메뉴에 이미지 저장이 표시되지 않기 때문입니다.
이미지를 저장하려면 HTML 소스에서 해당 이미지의 URL을 찾아 이미지를 직접 열거나 저장해야 합니다.
매번 이 작업을 진행할 때마다 매우 번거로워서 간단한 조작으로 그림을 저장하려고 한다.

해결책

다음 책갈피가 만들어졌습니다.

javascript:window.open(Array.prototype.filter.call(document.getElementsByClassName('product-artwork we-artwork--fullwidth we-artwork ember-view')[0].children,e=>e.tagName=='IMG')[0].getAttributeNode('src').value.replace(/\d+x\d+w.jpg$/,'65535x0w.jpg'),'_self');

이 코드를 완전히 복사하고 적절한 이름으로 Google Chrome의 책갈피로 저장합니다.

이미지를 가져오려는 비디오세트의 Apple Music 페이지예제를 연 후 이 책갈피를 열면 이미지가 브라우저에서 직접 열립니다.
이미지를 명명하고 저장할 수 있습니다.
또한 Internet Explorer 및 FireFox에서는 애플 뮤직 페이지에서 책갈피 클립을 실행할 수 없기 때문에 이러한 코드는 Google Chrome(또는 Chromium 기반 브라우저) 전용입니다.
(다른 브라우저에서는 시도되지 않음)

해설

상술한 코드는 책갈피에 사용되는 쓰기 장치이지만 원본 코드는 다음과 같다.

elements = document.getElementsByClassName('product-artwork we-artwork--fullwidth we-artwork ember-view');
img = Array.prototype.filter.call(elements[0].children, e => e.tagName == 'IMG')[0];
src = img.getAttributeNode('src').value; 
url = src.replace(/\d+x\d+w.jpg$/, '65535x0w.jpg');
window.open(url, '_self'); 

한 마디로 하면 대상의 이미지로 URL을 얻은 토대에서 이 URL의 파일 이름window.open()을 바꾸었다.
파일 이름의 끝을 '65535x0w.jpg'로 설정하는 것은 서버에 이보다 큰 이미지 크기가 없을 수도 있다는 가정을 바탕으로 합니다.
이것은 최대 크기의 그림을 얻기 위해서입니다.
이 값'600x0w.jpg'을 바꾸면 약 600x600 크기의 그림을 얻을 수 있습니다.
물론 애플뮤직의 페이지 사양이 변경되면 위 책갈피를 사용할 수 없을 가능성이 크다.

끝말

몇 명인지는 몰라도 앨범 예술 작품을 스스로 찾는 사람을 위해 이 기사를 썼다.
자신과 같은 취미로 음악 라이브러리를 만드는 사람을 도울 수 있다면 기쁠 것이다.