html2canvas text-shadow bug

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;

一些选项：

• 在此处提交拉取请求：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'
        })
    });
};