html2canvas 文本阴影错误答案

【问题标题】：html2canvas text-shadow bughtml2canvas 文本阴影错误
【发布时间】：2014-02-09 11:35:46
【问题描述】：

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 是这里的问题..

我该如何解决这个问题？谢谢

【问题讨论】：

标签： javascript jquery canvas html5-canvas html2canvas

【解决方案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 画布上绘制多个相邻的阴影，看看是否可以创建所需的内容。

【讨论】：

是的。这是一个很好的答案谢谢。如果我知道我怎么没有在这里问

【解决方案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'
        })
    });
};

【讨论】：