canvas의 영역을 클립보드에 붙여넣는 과정 정리 + 코드

 

이전에 간단하게 html2canvas로
화면의 element를 클립보드에 복사하는 방법에 대해서 정리했었다.

https://im-designloper.tistory.com/66

[ html2canvas ] html을 이미지로 클립보드에 복사하기 ( with Vue.js )

 

아래에서 html2canvas로 html element를 canvas로 변환한 이후에

클립보드에 붙여넣는 과정에 대해 정리한다.

 

  1    canvas

html문서 내부에 그림을 그릴 수 있는 일종의 '컨테이너' 엘리먼트

 

canvas에 element를 그려넣는 방법, 순서는 아래와 같다.

( html2canvas가 이 작업을 대신해서 선택한 element가 그려진 canvas를 반환해 주는것 같음! )

const makeCanvas = document.createElement("canvas"); // canvas를 만든다
makeCanvas.width = width; // canvas width값 지정
makeCanvas.height = height;  // canvas height값 지정

const DrawCanvas = makeCanvas.getContext("2d"); // 캔버스에  2차원 렌더링 컨텍스트를 나타내는 객체를 반환 
const img = document.getElementById("scream"); // 채워넣을 element
DrawCanvas.drawImage(img, 10, 10); // 선택한 element를 넣어놓음
	// drawImage > (채워넣을 element , 그려지기 시작할 x축, 그려지기 시작할 y축)

 

 

  2    Blob 객체

Blob(Binary Large Object, 블랍) 객체에 대해서 알아보면,

이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다고 함.

 

Blob은 대개 바이트의 크기를 알아내거나 해당
MIME(간략히 정리하면 파일 변환을 뜻한다고) 타입이 무엇인지 요청하며,

데이터를 작은 Blob으로 잘게 나누는 등의 작업에 사용된다.

 

즉, 데이터 자체라기보다는 데이터를 간접적으로 접근하기 위한 객체라고합니다.

 

 

  3    HTMLCanvasElement.toBlob()

HTMLCanvasElement = canvas가 포함하고 있는 이미지를 나타내는 Blob 객체를 생성

 

사용문법

    canvas.toBlob(callback, type, quality)  

ex )
canvas.toBlob(function(blob){ /*...*/ }, 'image/jpeg', 0.95); // JPEG at 95% quality

 파라미터

1. callback : Blob 객체로 변환된 값을 인수로 사용하는 콜백함수

2. type : 이미지 형식 지정        ( defalut = image/png; )

3. quality : 이미지를 생성할 때 사용할 이미지 품질 을 나타내는 0과 1사이의 숫자

 

 

  4    navigator.clipboard

clipBoard api ( 링크 )

navigator객체는 현재 머무르고 있는 브라우저의 정보를 얻을 수 있는 엘리먼트인데,

navigator의 메서드중 하나인 read(), write()를 사용하여 이미지를 읽고, 복사 할 수 있다.
아래의 두 메서드는 Promise로 결과가 리턴된다.

 

1. navigator.clipboard.read()

   > 클립보드의 이미지같은 데이터를 가지고 올때 사용

 

2. navigator.clipboard.write()

   > 클립보드에 이미지 같은 데이터를 넣을때 사용

 

  5   new ClipboardItem

blob객체를 사용하여 새 ClipboardItem 개체를 만든다.

new ClipboardItem ( 링크 )

new ClipboardItem({
	[파일 유형]: blob객체파일
    // ex "image/png": blob
})

 

 

뭔가 다음 프로젝트에 html을 클립보드에 저장할일이 생긴다면
코드 복붙 아니고 직접 써서도 가능할것같다..!

 

괜히 꽂혀서 처음부터 끝까지 정리해보았다

 

---

✔️ 참고

 

https://okky.kr/article/371073

https://curryyou.tistory.com/323

https://developer.mozilla.org/ko/docs/Web/API/Clipboard

https://uxicode.tistory.com/entry/Blob-객체

https://heropy.blog/2019/02/28/blob/