개요

요즘은 Codepen을 많이 사용하는데 이미지를 사용하려고 해도 유료 회원이 될 정도는 아니에요.
코드펜으로 이미지를 처리하는 방법을 시도해 보았는데, 유자 씨의 다음 기사를 만났습니다!
▼ 이 모양
CodePen의 무료 회원에게 이미지를 사용하면
※ 자세한 내용은 유자씨 기사를 참조하세요!
요약하면 Google Drive 및 DropBox에 업로드된 이미지에 따라 공유 링크 생성
컨텐트는 이미지를 참조할 수 있도록 공유 링크의 일부를 덮어씁니다.
이 글은 자바스크립트를 사용한 유자의 글을 참고하였다
Google Drive에 업로드된 이미지 링크를 한 번에 끝낼 수 있도록 코드를 작성해 보았다고 합니다.

하고 싶은 계기.

GoogleDrive에서 아이콘과 이미지를 요약했습니다.
Google Dirve의 단계를 보고 바로 해봤어요.
사용하고 싶은 이미지 공유 누르기
공유 링크 복사
img 태그의 src에 붙여넣기
URL 다시 쓰기...
... 다음 반복 이미지 섹션...
아아아아 귀찮아!
생각보다 귀찮아!
나는 10분 정도 기분 좋은 일을 하면서 생각했다.
이 번거로운 일을 한 번에 끝내고 싶은데..
↓
고려의 결과
이미지를 업로드할 때 고유 ID가 부여된 경우
폴더의 아이콘, 이미지 부분을 반복해서 처리하여 URL을 가공하고 img로 표시하면
이 일 안 해도 돼요?그렇게 생각하셨죠.

완성된 코드

출처

// removeSize関数：url の末尾に指定されている画像サイズを取り除く処理
const removeSize = (url) => {
        if (url.match('=w300-k-iv165')) {
            return url.repalce('=w300-k-iv165', '');
        } 
        else if (url.match('=w300-k-iv1')) {
            return url.replace('=w300-k-iv1', '');
        }
        else if (url.match('=w300-k-iv5')) {
            return url.replace('=w300-k-iv5', '');
        }
        else if (url.match('=w300-k-iv2')) {
            return url.replace('=w300-k-iv2', '');
        }
        else if (url.match('=w300-k-iv3')) {
            return url.replace('=w300-k-iv3', '');
        }
        else if (url.match('=w200-h190-p-k-nu-iv1')) {
            return url.replace('=w200-h190-p-k-nu-iv1', '');
        }
        else if (url.match('=w200-h190-p-k-nu-iv165')) {
            return url.replace('=w200-h190-p-k-nu-iv165', '');
        }
}

// フォルダ内の画像を全て取得
let picture = document.getElementsByClassName('l-u-Ab-zb-Ua');

// 取得した画像の数だけ、加工処理を繰り返す
for (let i = 0; i < picture.length; i++ ) {

　　// 画像の名前を取得して変数labelに代入
    const label = picture[i].closest('.jGNTYb').getAttribute('aria-label'); // ※1

　　//  取得した画像のimgタグからsrcを取得し、取得したソースの一部を外部参照URLのフォーマットに置き換える処理  
　　const url = picture[i].getAttribute('src').replace('https://lh3.google.com/u/0/d/', 'https://drive.google.com/uc?export=view&id=');

　　//　removeSizeでURL末尾のサイズ指定を取り除いたURLを取得し、imgタグのsrcにぶち込んだものをconsoleに出力
    console.log(`${label}\n<img src="${removeSize(url)}" alt="">`);
}

사용 방법

1. 기본적으로 GoogleDrive에 적절한 폴더를 만듭니다.
2. 아이콘과 이미지를 폴더에 업로드합니다.
3. Chrome 개발자 도구(F12/Ctrl+Shift+I)를 시작하고 console 옵션 카드에서 상기 코드를 붙여넣고 실행합니다.
4. 출력된img 태그를 텍스트 파일 등에 복사합니다.
이후 사용하고 싶을 때 생성된img 라벨을 복사하여 붙여넣기만 하면 사용할 수 있습니다.
만약 초상화가 추가된다면 다시 생성해야 하지만, 나는 수동 가공 URL보다 가볍다고 생각한다!

주의사항

만약 폴더를 만들지 않고 나의 실황 녹음에서 상술한 코드를 실행한다면
변수 레이블의 get Attribute는null입니다!욕을 먹다.
이것은 오류입니다. 폴더와 제 활동에서 조상 요소의class가 다르기 때문에 지정한class를 가진 조상 요소를 찾을 수 없습니다.
미도 실황 녹음에 사용하고 싶어요!이렇게, 변수 label의closest('.Ccie2c') 링크를 생성할 수 있습니다.