사진 줄이기·변환

휴대폰 사진은 가로 4000px, 몇 MB 가 흔합니다. 82editor는 올리기 전에 브라우저에서 사진을 줄이고, 필요하면 WebP 로 바꾸고, 아이폰 HEIC 사진을 JPEG 로 바꿉니다. 서버 용량과 글 읽는 사람의 데이터를 아낍니다.

createEditor('#editor', {
  toolbar: 'image | undo redo',
  imageResize: { maxWidth: 800, quality: 0.8, format: 'webp' },
  imageMaxSize: 3 * 1024 * 1024,
  imageAccept: 'image/jpeg,image/png,image/webp,.heic,.heif',
  uploadImage: async (file) => {
    console.log(file.name, file.type, Math.round(file.size / 1024) + 'KB');
    return URL.createObjectURL(file);
  },
});

사진 줄이기 (imageResize)

기본으로 켜져 있습니다. 가로가 maxWidth(기본 1600px)보다 넓은 JPEG·PNG·WebP 사진을 비율대로 줄이고, quality(기본 0.85)로 다시 저장합니다. 다음 경우에는 원본을 그대로 올립니다.

• 이미 maxWidth 이하인 사진
• GIF 등 JPEG·PNG·WebP 가 아닌 사진 (움직이는 GIF 가 멈추지 않게)
• 줄인 결과가 원본보다 크거나, 브라우저가 사진을 읽지 못할 때

줄이기를 끄려면 imageResize: false.

createEditor('#editor', {
  imageResize: { maxWidth: 1200, quality: 0.8 },
});

WebP 로 바꾸기

format: 'webp' 를 주면 JPEG·PNG 는 좁은 사진이라도 모두 WebP 로 다시 저장하고, 파일 이름 확장자도 .webp 로 바뀝니다. WebP 로 저장하지 못하는 브라우저이거나 결과가 더 크면 원본을 올립니다.

아이폰 HEIC 사진

아이폰 기본 형식인 HEIC/HEIF 는 브라우저 대부분이 화면에 보여 주지 못합니다. 사진을 읽을 수 있는 브라우저(Safari)에서는 품질 0.9 의 JPEG 로 바꿔서 올립니다. 읽지 못하는 브라우저에서는 그 사진을 넣지 않고 "JPG로 저장해서 올려 주세요" 안내를 띄웁니다. 형식 정보 없이 오는 HEIC 파일도 확장자(.heic, .heif)로 알아봅니다.

크기와 형식 제한

• imageMaxSize: 줄이기가 끝난 뒤, 실제로 올라가는 파일 크기로 검사합니다. 10MB 원본도 줄여서 기준 아래면 올라갑니다. 넘으면 "파일이 너무 커요 (최대 …)" 안내가 뜹니다.
• imageAccept: 파일 고르기 창의 형식 목록이면서, 넣을 때 검사하는 목록입니다. image/png 같은 형식, image/*, .webp 같은 확장자를 쉼표로 적습니다. 맞지 않으면 "이미지 파일만 넣을 수 있어요" 안내가 뜹니다.

붙여넣은 base64 사진

다른 곳에서 복사해 온 내용에 data: 사진이 들어 있으면, 업로드 설정이 있을 때는 서버로 올려 주소로 바꿉니다. 업로드 설정이 없으면 적어도 위 규칙대로 줄여서 글 크기를 줄입니다.

옵션