2

我有这个代码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 是这里的问题..

我该如何解决?谢谢

4

2 回答 2

2

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

于 2014-01-20T15:56:51.523 回答
1

//此函数将选择每个 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'
        })
    });
};
于 2016-04-15T11:17:30.727 回答