html2canvas文字陰影錯誤

Question

我有這樣的代碼http://jsfiddle.net/nuu7B/2/

html2canvas($('#preview'), { 
    onrendered: function (canvas) { 
     var canvasImg = canvas.toDataURL("image/jpg"); 
     $('#canvasImg').html('<img src="'+canvasImg+'" alt="">'); 
    } 
}); 

，我使用html2canvas導出圖像。但正如你所看到的那樣，文字陰影不能按照它應該的那樣工作。

text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000; 

我知道帆布支持文字陰影，但html2canvas是這裏的問題..

我該如何解決呢？ 感謝

Answer 1

html2canvas只具有基本的文字陰影支持：

// Not supported: text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000; 

// Just the basic X-offset, Y-offset, blur, color 

text-shadow: 1px 2px 3px #555; 

一些選項：

• 提交pull請求在這裏：https://github.com/niklasvh/html2canvas/pulls

• 位置一個CSS陰影在畫布上您需要它的樣式的html元素

• 實驗在html畫布上繪製多個相鄰的陰影以查看是否可以創建所需的陰影。

Answer 2

//此函數會選擇每一個SVG的文本和將應用CSS

function styleToSVGText () { 
    var SVGTextArr = $('svg text'); 
    SVGTextArr.each(function (i, item) { 
     $(item).css({ 
      'text-rendering': 'optimizeLegibility', 
      'font-family': 'sans-serif', 
      'text-shadow': 'transparent' 
     }) 
    }); 
};