【问题标题】: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());
    

    【讨论】:

      猜你喜欢
      • 2014-01-05
      • 1970-01-01
      • 2016-11-24
      • 1970-01-01
      • 2015-09-20
      • 1970-01-01
      • 2018-06-30
      • 2017-03-07
      • 1970-01-01
      相关资源
      最近更新 更多