728x90

개요

업로드한 이미지가 너무 큼. 3024*3000 사이즈임.

그러면, 브라우저에 아래처럼 보임.

사용자가 이걸 보면, 분노할 듯

업로드한 파일 원본 사이즈를 수정하는 방법

const image = new Image();
image.src = dataURL;

// 결과
// <img src="blob:http://localhost:3333/f340eff7-38d2-49c6-bbf8-1ef08f384b25">

dataURL에는 뭐가 들어가야 하나? - img태그에 src에 들어갈 수 있는 url임. 브라우저 url or aws s3 url

URL.createObjectURL()에 파라미터로 blob도 된다.

URL.createObjectURL(blob도 되고, event.target.file)

HTMLCanvasElement.toDataURL()

- 이미지 표현을 포함하는 data URL을 반환한다

HTMLCanvasElement.getContext()

- 텍스쳐의 필라델피아를 반환합니다.

var ctx = canvas.getContext(contextType);

- contextType

2d: 2차원 최소형 을 나타내는 CanvasRenderingContext2D (en-US) 객체를 생성할 수 있습니다.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
console.log(ctx); // CanvasRenderingContext2D { ... }

readFile

const reader = new FileReader();

728x90