Html2canvas: 회전 이미지를 저장하려면 어떻게 해야 합니까?

CSS 변환은 아직 지원되지 않습니다.

그래서 base64에서 이미지를 회전시킬 수 있습니까?

변환 CSS가 작동하지 않습니다. 어떤 해결책???

@arindamm 이에 대한 유일한 빠른 해결책은 "캔버스"를 "CSS"로 바꾸는 것입니다.
캔버스에서 이미지나 텍스트를 가져와 회전합니다(이 작업은 "html2canvas" 라이브러리 외부에서 수행되어야 하며 함수를 호출하기 전에 있어야 함).

내 응용 프로그램을 통해 불가능합니다. 나는 온라인 이야기 책을 만들 것이다. 사용자는 원하는 만큼 이미지와 텍스트를 배치할 수 있습니다. 또한 해당 개체의 크기를 조정하고 회전할 수 있습니다. 나는 이것을 위해 DIV 태그를 사용하고 있습니다. div 요소의 데이터로 캔버스를 어떻게 만들 수 있습니까? 제안 부탁드려도 될까요?

@arindamm 당시에 이미지를 저장하기 위해 말했듯이,
"회전"이 있는지 감지하기 위해 모든 요소와 "window.getComputedStyle"(또는 jquery)을 사용할 수 있습니다.
개체 스타일에서 "회전"하면 개체 내부에 있는 "회전" 값과 텍스트(또는 이미지)를 가져와 "캔버스"에 대한 효과를 시뮬레이션합니다.

 var 캔버스 = document.getElementById('myCanvas');
 var 컨텍스트 = 캔버스.getContext('2d');
 var 직사각형 너비 = 150;
 var 수직 높이 = 75;
 // 컨텍스트를 캔버스 중앙으로 변환
 context.translate(canvas.width / 2, canvas.height / 2);
 // 시계 방향으로 45도 회전
 context.rotate(Math.PI / 4);
 context.fillStyle = '파란색';
 context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

연결:
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
http://api.jquery.com/css/ (Jquery로 CSS 가져오기)
http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/ (캔버스+자바스크립트로 회전)

메모:
준비된 솔루션은 없지만 이러한 링크와 코드를 통해 귀하의 사례에 대한 대안을 만들 수 있습니다.
또 다른 아이디어는 작업을 수행하는 각 브라우저에 대한 플러그인을 만드는 것입니다.

크롬:
chrome.tabs.captureVisibleTab(integer windowId, object options, function callback)
링크: http://developer.chrome.com/extensions/tabs.html

파이어폭스: void drawWindow( in nsIDOMWindow window, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags [optional]);
링크: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D?redirectlocale=en-US&redirectslug=DOM%2FCanvasRenderingContext2D#drawWindow ()

도움이 되기를 바랍니다.

같은 주제에 다른 여러 문제가 있으므로 닫습니다.

이미지를 blob으로 포함할 때 회전이 실제로 작동한다는 점에 주목하는 것이 흥미로울 수 있습니다.

더 이상한 점은 얼룩 없이도 작동합니다. 몇 주 전에 받은 내 파일에는 0.4.1이라고 나와 있습니다. 직접 빌드하거나 bower를 통해 설치할 때 작동하지 않았습니다. 유감스럽게도 나는 그것을 가지고 놀았던 곳을 기억하지 못합니다 ...

0.4.1을 사용하여 확인란을 선택할 때 Content div가 내려옵니다.
누구든지 저를 도와주세요.

여기에 설명된 해결 방법을 수행할 수 있습니다.
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

@jjoe64 링크로 감사하지만 html2canvas에는 의미가 없습니다.

html2canvas는 캔버스의 렌더링(다시 그리기) DOM 요소(또는 전체 페이지)용 라이브러리이며 렌더링 캔버스 태그가 없습니다.

귀하의 솔루션은 회전이 있는 하나의 요소에 대해서만 작동합니다.

예, 완벽하게 작동하는 솔루션은 아니지만 회전된 텍스트나 이미지를 렌더링해야 하는 경우 문제에 대한 _해결 방법_입니다. 그리고 이 사용 사례의 경우 우리가 사용한 프로젝트에서 완벽하게 작동합니다.

CSS 변환으로 div를 저장하는 방법: 원근?