Bootstrap複選框與畫布

我正在使用庫https://github.com/flatlogic/awesome-bootstrap-checkbox添加漂亮的複選框/單選按鈕到我的網站，它看起來很好。但是當我試圖用html2canvas庫做一個div塊的截圖時，我在生成的image上得到了一些奇怪的東西。Bootstrap複選框與畫布

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截圖沒有畫布，但我沒有找到他們。謝謝大家提前

來源

2016-02-23 Mykhailo Iaremenko

我想，html2canvas庫不完美，並沒有正確渲染CSS。 – alex

@alex也許你知道一個好的圖書館？這將有所幫助 –

'html2canvas'確實很好，但是「漂亮的CSS」通常是不受支持的。 Chrome提供了一個內置的屏幕抓取器，但大多數情況下，出於良好的安全原因，您無法進行屏幕抓取。 – markE

只有一個解決方案，我發現。在使用html2canvas進行截圖之前，我必須從複選框中刪除引導樣式。截圖完成後，請求被髮送到服務器，我設置了風格。它不是很好，但我沒有找到更好的解決方案。

來源

2016-07-15 12:41:36

Bootstrap複選框與畫布

回答

相關問題