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 は正常に機能していません。

text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;

キャンバスがテキストシャドウをサポートしていることは知っていますが、html2canvas がここで問題です..

どうすれば修正できますか？ありがとう

4

2 に答える 2

2

html2canvas には、基本的な text-shadow サポートのみがあります。

// 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 に答える