javascript - 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'
        })
    });
};