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;

一些备选方案：

• 在这里提交一个拉请求：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'
        })
    });
};