나는 이미지 객체 아래와 같이있다 :캔버스에 그리기 전에 이미지 오브젝트를 회전 HTML
imgObj = new Image();
imgObj.src = "http://localhost/images/img1.png";
imgObj.onload = function() {}
와 나는 버튼을 클릭하면 캔버스에 이미지를 그리려. 클릭 할 때마다 이미지가 그려지지만 결과가 떨어지는 것을 원하지 않기 때문에 드로잉 전에 오브젝트를 회전시키고 싶습니다. 다르게보아야합니다.
내 프로젝트에서 javascript 및 jQuery를 사용하고 있습니다. 그래서 거기에 어떤 해결책이 있습니까?
이 작동합니다 :
imgObj.style.transform = "rotate(90deg)"
그것은 이미지 개체에 transform CSS 스타일 속성을 설정합니다.
작동하지 않습니다. 이미지가 문서에 나타나지 않습니다. 그것의 추상적 인 객체. –
이 도움이 될 수 있습니다. https://stackoverflow.com/a/6011402/1861779 @BehnamAzimi –
참고 내 솔루션 DOM을 작동하지만 캔버스 작동하지 않을 수 –
context.rotate을 사용하여 캔버스를 회전 한 다음 일반적으로 이미지를 캔버스에 그릴 수 있습니다. 이미지가 회전됩니다. 회전없이 더 많이 그리려면 restore을 사용하십시오.
context.rotate(45 * Math.PI/180);
context.drawImage(img, 0, 0);
context.restore()
개체를 컨텍스트가 아닌 회전해야합니다. 어떤 경우에는 렌더링을하기 때문에 이전 드로잉 옵션이 필요합니다. –
@BehnamAzimi 그러면 다시 그리기를 원할 때 다시 돌아옵니다. – Kaiido
이미지를 회전하면 (별도의 캔버스를 만들어 회전 할 때) 이미지 품질이 떨어집니다. 캔버스 변환을 사용하여 회전하여 원본을 캔바스로 렌더링하는 것이 가장 좋습니다. 이렇게하면 렌더링 할 때마다 최상의 품질을 얻을 수 있습니다. – Blindman67
@ Blindman67, 내 캔버스에서 클립을 사용하고 컨텍스트를 회전 할 때 클립 아래에 숨 깁니다. 내가 원을 잘라낸 캔버스가 있다고 상상해보십시오. 회전하면 캔버스 레이어 아래에 내용이 표시됩니다. –
관련 코드를 보여줘야합니다. 회전 된 이미지를 저장하지 않는 한 이미지를 미리 회전시켜야 할 이유가 없습니다. – Blindman67