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

当您将图像绘制到Canvas时，不会使用任何webkit / CSS变换绘制图像。你只需绘制普通的旧图像。

但是，您可以将变换应用于Canvas上下文本身，然后绘制图像。

请注意，这与将任何类型的变换应用于Canvas不同。只是画布上下文。

因此，您不想进行webkit旋转转换，而是要调用context.rotate

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

请注意，此处缺少一个步骤。当您转换上下文时，您总是按上下文的左上角进行转换，因此通常您必须结合使用平移和旋转来获得所需内容。

以下是使用画布上下文围绕其中心旋转的图像示例：http://jsfiddle.net/Wyw8p/

Answer 2

我们找到了问题的解决方案。我的同事Nikola Chakurov发现了一个名为Html2Canvas的新版本库。发布版本为0.5.0-rc1，适用于与旋转相关的问题。这是解决我们问题的链接：

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

我想提一下Html2Canvas版本0.5.0-rc1的代码看起来非常干净和漂亮。我大拇指。

在画布上绘制时，图像会丢失webkit转换

2 个答案: