html2canvas - html2canvas 每次生成不同的结果

Question

以下是将 html 下载为图像的 JS 代码。

html2canvas(document.querySelector('#js-market-analysis'),{
     width: 600,
     height: 600,
     letterRendering: 1,
     allowTaint: true,
     useCORS: true,
 }).then(function(canvas) {
     saveAs(canvas.toDataURL('image/png'), 'Market Analysis.png');
 });

要作为图像下载的 HTML 代码。

<div class="kt-portlet__body kt-portlet__body--fluid" id="js-market-analysis">
    <div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex w-100 h-100">
        <div class="color-display-grid-wrapper d-flex justify-content-between flex-column">
            <h5>
                <div class="d-flex align-items-center">
                    <span class="color-display-grid tam-display"></span>
                    <span>TAM</span>
                </div>
                <label class="small mt-2 mb-0 d-block js-total-addressable-market-chart-info"></label>
            </h5>
            <h5>
                <div class="d-flex align-items-center">
                    <span class="color-display-grid sam-display"></span>
                    <span>SAM</span>
                </div>
                <label class="small mt-2 mb-0 d-block js-serviceable-addressable-market-chart-info"></label>
            </h5>
            <h5>
                <div class="d-flex align-items-center">
                    <span class="color-display-grid som-display"></span>
                    <span>SOM</span>
                </div>
                <label class="small mt-2 mb-0 d-block js-serviceable-obtainable-market-chart-info"></label>
            </h5>
        </div>
        <div class="marketanalysis-graph text-center">
            <img src="{{ asset('assets/img/graph.png') }}" alt="image" class="img-fluid img-graph">
        </div>
    </div>
</div>

每次点击我都面临一个问题，结果与所需的输出不一致。任何人都可以建议代码中有什么问题。

标签： html2canvas