带画布的引导复选框答案

【问题标题】：Bootstrap checkbox with Canvas带画布的引导复选框
【发布时间】：2016-06-05 13:16:38
【问题描述】：

我正在使用库 https://github.com/flatlogic/awesome-bootstrap-checkbox 为我的网站添加漂亮的复选框/单选按钮，它看起来不错。但是，当我尝试使用 html2canvas 库对 div 块进行屏幕截图时，生成的 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));

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

【问题讨论】：

我猜 html2canvas 库并不完美，也没有正确渲染 CSS。
@alex 也许你知道一个很好的库？这会很有帮助
html2canvas 很好地完成了“基本 CSS”，但通常不支持“漂亮 CSS”。 Chrome 提供了一个内置的屏幕抓取器，但出于安全考虑，大多数情况下您无法进行屏幕抓取。

标签： php jquery html css canvas

【解决方案1】：

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

【讨论】：