изображение теряет трансформацию webkit при рисовании на холсте

Question

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

          var canvas = document.getElementById("myCanvas");
          var context = canvas.getContext("2d"); 
          var wrkimg = document.getElementById("workingimg");

          wrkimg.onload = function()
                {
                   $(this).css('-webkit-transform', 'rotate(162deg)  scale(1,1) scaleX(1)');    
                   context.drawImage(wrkimg, 50, 50);                
                 }

          wrkimg.src = 'Appimages/Head1.png';

Answer 1

Мы нашли решение проблемы. Мой коллега Никола Чакуров нашел новый выпуск библиотеки под названием Html2Canvas. Версия выпуска - 0.5.0-rc1, и она отлично работает для проблемы, связанной с вращением. Это ссылка, которая решает нашу проблему:

https://github.com/niklasvh/html2canvas/tree/rc/build

Хотелось бы отметить, что код Html2Canvas версии 0.5.0-rc1 выглядит очень чисто и красиво. Большой палец от меня.

Answer 2

Когда вы рисуете изображение в Canvas, вы не рисуете изображение ни с одним из его webkit / CSS-преобразований. Вы просто можете нарисовать простое старое изображение.

Однако вы можете применить преобразования к самому контексту Canvas и затем нарисовать изображение.

Обратите внимание, что это не то же самое, что применение любого вида преобразования к Canvas. Просто контекст холста.

Таким образом, вместо преобразования webkit rotate вы захотите позвонить context.rotate

context.rotate(162 * (Math.PI/180)); // works in radians so we gotta convert
context.drawImage(wrkimg, 50, 50);

Обратите внимание, что здесь отсутствует шаг. Когда вы трансформируете контекст, вы всегда трансформируетесь в верхнем левом углу контекста, поэтому обычно вам нужно выполнить комбинацию перевода и поворота, чтобы получить то, что вы хотите.

Вот пример изображения, повернутого вокруг его центра, используя контекст холста: http://jsfiddle.net/Wyw8p/