3

我的应用程序中有一个 d3 图表，我想要的是截取图表。我正在使用 html2canvas.js 和 canvg.js 插件将 div 内容转换为 base64 字符串。我使用内联样式来绘制图表。我从另一篇文章中得到了这个解决方案。

我的图表中有矩形，我使用渐变色填充矩形，但是当我截取屏幕截图时，矩形的背景颜色不显示，请参见下面的图片↓↓。在搜索了一些解决方案后，我了解到 html2canvas 插件有一些限制，并且 canvg 在某些设计上也会有问题。

var sContainer = $("#idtrendChartMain")
    svgElements = $(sContainer).find('svg');
    var savedSlideName;

    //replace all svgs with a temp canvas
    svgElements.each(function () {

        var canvas, xml;
        // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
        $.each($(this).find('[style*=em]'), function (index, el) {
            $(this).css('font-size', getStyle(el, 'font-size'));
        });
        canvas = document.createElement("canvas");
        sContainer[0].appendChild(canvas);

        //convert SVG into a XML string
        xml = (new XMLSerializer()).serializeToString(this);

        // Removing the name space as IE throws an error
        xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
        //console.log(xml);
        //xml = xml.replace(/xmlns:xlink=\"http:\/\/www\.w3\.org\/1999\/xlink\"/, '');
        xml = xml.replace(/xlink:/g, '');

        //draw the SVG onto a canvas
        canvg(canvas, xml);

        $(canvas).insertAfter(this);
        //hide the SVG element
        $(this).attr('class', 'tempHide');
        $(this).hide();
    });

    html2canvas($(sContainer), {
        allowTaint: true,
        letterRendering: true,
        onrendered: function (canvas) {
            var base64 = canvas.toDataURL();
            base64 = base64.replace('data:image/png;base64,', '');
            //creating the request
            var request = {};
            request.Base64 = base64;
            $.ajax({
                type: "POST",
                url: AQ.Verizon.Url + "/Home/StoreImage",
                //async: false,
                data: JSON.stringify({ request: request }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (Data) {      

                },
                error: function (e) {

                    alert("fail");
                }
            });
            $(sContainer).find('canvas').remove();
            $('svg').show();
        }
    });

原始图表 在此处输入图像描述

截屏 在此处输入图像描述

我可以用我所拥有的东西解决这个问题，或者有什么更好的截图插件吗？因为如果我使用下面的代码，我将无法获得确切的屏幕截图，而且清晰度也很差。

4

0 回答 0