圖像在畫布上繪製時丟失了webkit轉換

我正在將一個webkit轉換應用於img，然後我想將該圖像繪製到畫布上。當我申請的圖像顯示了轉換代碼，但在畫布上顯示的圖像就像是在轉換之前...任何想法在此先感謝..圖像在畫布上繪製時丟失了webkit轉換

  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';

來源

2012-01-06 user852566

當你畫的圖像，你做畫布不要使用任何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/

來源

2012-01-07 04:10:09

謝謝西蒙，這將解釋爲什麼沒有什麼工作很多..蒂姆 – user852566 2012-01-10 22:01:51

我們找到了問題的解決方案。我的同事Nikola Chakurov發現了一個名爲Html2Canvas的圖書館的新版本。發行版本是0.5.0-rc1，它適用於與旋轉相關的問題。這是解決我們問題的鏈接：

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

我想提一提的是，Html2Canvas版本0.5.0-RC1的代碼，它看起來非常乾淨，漂亮。大拇指從我身上。

來源

2014-07-22 11:09:43

圖像在畫布上繪製時丟失了webkit轉換

回答

相關問題