html2canvas 呈现低不透明度的引导按钮

【问题标题】：html2canvas rendering bootstrap button with low opacityhtml2canvas 呈现低不透明度的引导按钮
【发布时间】：2022-01-24 08:05:35
【问题描述】：

库html2canvas 可以为您的 html 内容拍照。但有时颜色并不准确。

Chrome 没问题，Firefox 有这个问题。开发工具打开时不会发生。

<div class="col-auto btn-group btn-group-toggle mb-2" data-toggle="buttons">
    <label class="btn btn-primary btn-xs border-0 active">
         <input type="radio" name="x" value="1" data-html2canvas-ignore="" checked="">Vývoj
    </label>
    <label class="btn btn-primary btn-xs border-0">
        <input type="radio" name="x" value="2" data-html2canvas-ignore="">Vybrané obodbí
    </label>
</div>

【问题讨论】：

标签： html2canvas

【解决方案1】：

这是因为按钮已经过渡到动画状态变化。

/* bootstrap button */
.btn {
    ...
    transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

Html2canvas 复制你的 dom 元素并将它们渲染到画布上。要禁用过渡，请添加样式标签并在渲染后将其删除。

// Create styleelement to disable transitions globally
$("head").append('<style id="html2canvas_no_transitions" type="text/css">* {transition: none !important;}</style>');

// Render
html2canvas(element, options)
    // Process canvas
    .then(canvas => whateveryouneedwith(canvas))
    // Remove style element 
    .finally(() => $('#html2canvas_no_transitions').remove());

【讨论】：