이미지 편집

이미 넣은 사진을 그 자리에서 자르고 돌립니다. 옆으로 누운 휴대폰 사진, 필요 없는 가장자리를 다른 프로그램 없이 고칠 때 씁니다.

createEditor('#editor', {
  toolbar: 'image | undo redo',
  height: 380,
  uploadImage: async (file) => URL.createObjectURL(file),
});

여는 방법

사진을 누르면 뜨는 막대의 이미지 편집 단추로 엽니다. 따로 툴바 항목은 없습니다. 코드에서는 사진이 선택된 상태에서 editor.exec('imageEdit') 로 엽니다.

할 수 있는 것

• 자르기: 사진 위 상자를 끌어 옮기고, 네 모서리를 끌어 크기를 바꿉니다.
• 비율: 자유, 1:1, 4:3, 3:4, 16:9. 비율을 고르면 지금 상자 안에서 가장 큰 그 비율 상자가 됩니다.
• 왼쪽으로 돌리기 / 오른쪽으로 돌리기: 90도씩. 돌리면 자르기 상자는 처음으로 돌아갑니다.
• 좌우 뒤집기
• 원래대로: 창을 닫지 않고 돌리기·뒤집기·자르기를 모두 되돌립니다.

오른쪽 아래에 잘린 결과의 실제 픽셀 크기가 보입니다. 휴대폰을 옆으로 돌리거나 창 크기가 바뀌면 미리보기가 다시 맞춰집니다.

적용하면

적용을 누르면 결과를 새 파일로 만들어 새 사진처럼 올리고 원래 사진의 주소를 바꿉니다. 그래서 uploadImage·uploadUrl, imageResize, imageMaxSize 가 그대로 적용됩니다. JPEG·PNG·WebP 는 같은 형식으로, 그 밖의 형식은 PNG 로 저장되고 파일 이름 끝에 -edit 가 붙습니다.

자르거나 90도 돌렸으면 픽셀 너비로 정한 크기는 지우고, %로 정한 너비는 그대로 둡니다. 배치, 캡션, 링크, 대체 텍스트는 바뀌지 않습니다. 되돌리기(Ctrl+Z)로 원래 사진으로 돌아갈 수 있습니다.

옵션