如何删除画布周围的灰色边框

Posted 2023-03-04

【中文标题】如何删除画布周围的灰色边框

【英文标题】：How to delete grey border around canvas

【发布时间】：2020-06-24 16:29:08

【问题描述】：

我需要将一些 html 片段导出到 pdf 文件。 我用于那个 html2canvas 和 pdfjs。 但是这个片段周围添加了一些灰色边框

这是测试 html 片段：

<div class="col-md-12 white-bg box-shadow margb0" id="test">
     <div class="col-md-12 paddl0 paddr0 margt0 margb10">
          <h4 class="paddb10 margt20 margb10 border-bottom-sc">
              Some information out here
          </h4>
     </div>
</div>

还有它的 css（col-md-12 来自 bootstrap.min.css）：

.white-bg  background: #ffffff; 
.margb0 margin-bottom: 0px !important;
.margt0 margin-top: 0px !important;
.margb10 margin-bottom: 10px;
.margt20  margin-top: 20px;
.paddl0 padding-left: 0px !important;
.paddr0 padding-right: 0px !important;
.paddb10  padding-bottom: 10px;
.border-bottom-sc border-bottom: 1px solid #424343;

在 Chrome 中它看起来像这样：

这是我在 js 中的做法：

var pdf = new jsPDF('p', 'pt', 'a4', true);
var content = document.getElementById('test');
html2canvas(content,  background: "white" ,
                          scrollX: 0, scrollY: 0 ).then(function (canvas) 
    var srcImg  = canvas;
    var sX      = 0;
    var sY      = 0;
    var sWidth  = 1150;
    var sHeight = 1350;
    var dX      = 25;
    var dY      = 25;
    var dWidth  = 1150;
    var dHeight = 1350;
    window.onePageCanvas = document.createElement("canvas");
    onePageCanvas.setAttribute('width', 1150);
    onePageCanvas.setAttribute('height', 1350);
    var ctx = onePageCanvas.getContext('2d');
    ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight);
    var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

    var width         = onePageCanvas.width;
    var height        = onePageCanvas.height;
    pdf.addImage(canvasDataURL, 'jpg', 0, 0, (width*.51), (height*.51));
    pdf.save('test.pdf');
);

下面是这个片段在文档中的样子：

演示：https://jsfiddle.net/x6yg1kbm/2/

所以我的问题是：如何在 pdf 导出期间不显示此边框？

【问题讨论】：

可以分享演示吗

【参考方案1】：

只需删除 .white-bg background: #ffffff; CSS 属性