Html2canvas: Как я могу сохранить поворот изображения?

Преобразования CSS пока не поддерживаются.

так я могу заставить изображение вращаться в base64?

Преобразование css не работает. Любое решение???

@arindamm единственное быстрое решение этой проблемы было бы, если бы вы заменили «CSS» на «холст».
Возьмите изображение или текст на холсте и сделайте поворот (это должно быть сделано вне библиотеки "html2canvas" и должно быть до вызова функции).

Это невозможно через мое приложение. Я собираюсь сделать онлайн-книгу рассказов. Там пользователь может разместить столько изображений и текста, сколько захочет. Они также могут масштабировать и вращать эти объекты. Я использую тег DIV для них. Как я могу создать холст с данными элемента div? Можете ли вы предложить, пожалуйста?

@arindamm Это было, как я сказал в то время, чтобы сохранить изображение,
вы можете взять все элементы и «window.getComputedStyle» (или jquery), чтобы определить, был ли «поворот».
Если «повернуть» в стиле объекта, то вы берете значение «поворот» и текст (или изображение), который находится внутри объекта и имитирует эффект на «холсте».

 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var rectWidth = 150;
 вар rectHeight = 75;
 // перевод контекста в центр холста
 context.translate (холст. ширина / 2, холст. высота / 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/ (получите CSS с помощью Jquery)
http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/ (поворот с помощью canvas+javascript)

Примечание:
Готового решения нет, но возможно по этим ссылкам и коду вы сможете создать альтернативу для своего случая.
Другая идея заключается в том, что вы создаете плагин для каждого браузера, который выполняет эту работу:

Хром:
chrome.tabs.captureVisibleTab(integer windowId, object options, function callback)
Ссылка: http://developer.chrome.com/extensions/tabs.html

Firefox: 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 ()

Надеюсь, это поможет.

Закрытие, так как есть несколько других вопросов по той же теме.

может быть, интересно отметить, что вращение действительно работает, когда вы вставляете изображение в виде блоба...

Еще более странно: он работает и без блоба. В моем файле, который я получил пару недель назад, указано, что это 0.4.1. При сборке самостоятельно или установке через беседку это не сработало. К сожалению, я не помню, где я его взял, так как просто играл...

Контент div падает, когда я устанавливаю флажок, используя 0.4.1
Может кто-нибудь мне помочь.

вы можете сделать обходной путь, который описан здесь:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

Спасибо за ссылку @jjoe64 , но это не имеет смысла для html2canvas.

html2canvas — это библиотека для рендеринга (перерисовки) элементов DOM (или полной страницы) в холсте без тега рендеринга холста.

Ваше решение работает только для одного элемента с вращением.

да, это не решение, которое работает идеально, но это _обходное_ решение проблемы, если вам нужно отображать повернутый текст или изображения. И для этого варианта использования он отлично работает в нашем проекте, где мы его использовали.

Как я могу сохранить div с помощью преобразования CSS: перспектива?