Async Clipboard API의 Clipboard
인터페이스는 시스템 클립보드의 콘텐츠에 관한 읽기 및 쓰기 액세스 권한을 제공합니다. 이를 통해 웹 애플리케이션에서 잘라내기, 복사, 붙여넣기 기능을 구현할 수 있습니다. read()
메서드를 호출하여 클립보드에서 애플리케이션에 데이터를 붙여넣고 write()
메서드를 호출하여 클립보드에 데이터를 복사할 수 있습니다.
텍스트, 휴대용 네트워크 그래픽 (PNG) 형식의 이미지, 정리 및 삭제되지 않은 HTML, 웹 맞춤 형식 외에도 Async Clipboard API는 이제 SVG 이미지 복사 및 붙여넣기를 지원합니다. 즉, 최종적으로 SVG 이미지 대신 SVG 이미지를 복사해 붙여넣는 대신 이미지 편집 소프트웨어를 더 자연스럽게 처리할 수 있습니다.
특성 감지 SVG 지원
정적 ClipboardItem.supports()
메서드를 호출하고 원하는 MIME 유형에 전달하여 SVG 이미지 (및 기타 MIME 유형) 지원을 감지합니다.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
SVG 이미지 복사
ClipboardItem
에 객체를 입력하여 SVG 이미지를 복사합니다. SVG 이미지 데이터가 포함된 blob이 값이고 blob의 유형(이 경우에는 'image/svg+xml'
)이 키로 사용됩니다.
copyButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
try {
const blob = await fetch(img.src).then((response) => response.blob());
await navigator.clipboard.write([
new window.ClipboardItem({
[blob.type]: blob,
}),
]);
} catch (err) {
console.error(err.name, err.message);
alert(err.message);
}
});
SVG 이미지 붙여넣기
SVG 이미지를 붙여넣으려면 클립보드에서 ClipboardItem
를 다시 읽고 getType()
메서드를 사용하여 원하는 유형 (이 경우 'image/svg+xml'
)을 가져옵니다. 그러면 blob URL로 변환되면 <img>
의 src
속성에 할당할 수 있는 blob이 반환됩니다.
pasteButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
const [clipboardItem] = await navigator.clipboard.read();
const svgBlob = await clipboardItem.getType('image/svg+xml');
if (!svgBlob) {
alert('No SVG in the clipboard.');
return;
}
const image = document.createElement('img');
const blobURL = URL.createObjectURL(svgBlob);
image.addEventListener('load', () => {
URL.revokeObjectURL(blobURL);
});
image.src = blobURL;
});
정리
SVG는 스크립트 삽입 등을 허용하는 강력한 형식입니다. 이는 사용자가 알 수 없는 소스의 콘텐츠를 붙여넣는 경우 위험할 수 있으므로 브라우저에서 제거 단계를 실행합니다. 데이터가 복사되면 Async Clipboard API는 올바른 형식의 SVG 문서를 생성한 다음 클립보드에 씁니다. 데이터를 붙여넣으면 프래그먼트 파서가 엄격하게 처리된 SVG 프래그먼트를 생성합니다. 따라서 붙여넣기 작업 전에는 onclick
이벤트 핸들러 속성이 여전히 존재하지만 붙여넣기 후에는 삭제됩니다.
데모
Glitch에 관한 데모에서 SVG를 복사하고 붙여넣는 방법을 알아보세요. 소스 코드에서 작동 방식을 확인하세요. 복사하여 붙여넣기 전후의 원을 클릭해 보세요. 붙여넣기 후에는 잠재적으로 위험한 onclick
이벤트 핸들러 속성이 삭제됩니다.
관련 링크
- 이 기능을 사용하는 프로덕션 소프트웨어:
- ChromeStatus 항목
- 발송 예정
- Chromium 버그
- WebKit 표준 위치
- Mozilla Standards 위치
감사의 말씀
Chromium의 Async Clipboard API를 위한 SVG 지원은 Microsoft Edge팀에서 구현했습니다. 이 게시물은 Rachel Andrew와 Anupam Snigdha가 검토했습니다.