php - 带有 Canvas 的 Bootstrap 复选框

Question

我正在使用库 https://github.com/flatlogic/awesome-bootstrap-checkbox用于向我的网站添加漂亮的复选框/单选按钮，它看起来不错。但是当我尝试使用 html2canvas 库截取一个 div block 时，我在生成的 image 上得到了一些奇怪的东西。 .

HTML代码:

<div class="checkbox checkbox-warning checkbox-circle">
    <input type="checkbox" id="checkbox5" class="test-checkbox" checked="checked">
    <label for="checkbox5"></label>
</div>

JS代码:

var element = $('#body-details');
            html2canvas(element, {
                onrendered: function(canvas) {
                    var img = canvas.toDataURL();
                    var url = $('#image-url').val();
                    $.post(url, {data: img}, function () {});
                }
            });

PHP代码:

    $data = Yii::$app->request->post('data');
    $file = time() . '.jpg';
    $dirPath = './' . Yii::$app->session->get('userFolder') . '/';

    // remove "data:image/png;base64,"
    $uri =  substr($data, strpos($data, ",") + 1);

    // save to file
    if (!file_exists($dirPath)) {
        mkdir($dirPath, 0777, true);
    }
    file_put_contents($dirPath . '/' . $file, base64_decode($uri));

也许还有其他方法如何在没有 Canvas 的情况下对 div 进行屏幕截图，但我没有找到它们。 提前谢谢大家

Answer 1

我只找到了一种解决方案。 在使用 html2canvas 制作屏幕截图之前，我必须从复选框中删除 Bootstrap 样式。制作屏幕截图并将请求发送到服务器后，我将样式设置回来。它不是很好，但我没有找到更好的解决方案。