캔버스를 사용하여 이미지 회전 및 자르기

Question

서버에 이미지를 업로드 할 수있는 웹 응용 프로그램이 있습니다. 서버로 보내기 전에 이미지를 자르고 회전하려고합니다. HTML 5 캔버스를 사용하여 수행 할 수있는 모든 방법

Answer 1

예, html 캔버스는 이미지를 자르고 회전 할 수 있습니다.

자르기 : context.drawImage의 확장 속성을 사용하십시오.

context.drawImage(img,cropX,cropY,cropWidth,cropHeight,0,0,cropWidth,cropHeight); 

회전 : 사용 context.rotate 속성입니다.

// set the point of rotation (example below sets rotation point at center-image) 

context.translate(img.width/2,img.height/2); 

// do the rotation (in radians) 

context.rotate(radianAngle); 

주 : 모든 변환 (변환, 회전 등)은 context.save /context.restore가 아닌 한 누적됩니다.