html2canvas 中计算的渐变无法正常工作

Question

我试图在 html2canvas 的帮助下截取一个页面的屏幕截图，该页面的图像由线性渐变覆盖。图像的高度有所不同，但宽度固定为 210px，因此，我需要使用 calc 来计算渐变的位置，这不会以屏幕上显示的方式呈现。

静态值示例：https://jsfiddle.net/vpj3bz7s/1/

.linearGradient {
  height: 200px;
  width: 210px;
  background-image: linear-gradient(to top left,
      yellow 0%,
      yellow 80px,
      red 80px,
      red 110px,
      yellow 110px,
      yellow 100%);
}
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
  }
);
<div class="linearGradient"></div>

计算值示例：https://jsfiddle.net/dk309pf6/2/

.linearGradient {
  height: 200px;
  width: 210px;
  background-image: linear-gradient(to top left,
      yellow 0%,
      yellow calc(50% - 10px),
      red calc(50% - 10px),
      red calc(50% + 10px),
      yellow calc(50% + 10px),
      yellow 100%);
}

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
  }
);
<div class="linearGradient"></div>

编辑： 叠加在渐变上的实际图像如下所示：

屏幕截图的样子是这样的：

我的实际代码的JS小提琴如下（但截图与我原来的有点不同）

https://jsfiddle.net/nrfjh8m3/1/

Answer 1

这里有一个不同的想法来获得相同的梯度。有很多方法，但以下是唯一适用于 html2canvas 的方法：

body {
  margin: 0px;
}

.linearGradient {
  height: 200px;
  width: 210px;
  background-color:red;
  overflow:hidden;
   position:relative;
}
.linearGradient::before,
.linearGradient::after {
   content:"";
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
   background-repeat:no-repeat;
}
.linearGradient::before {
  background:linear-gradient(to bottom right,yellow 49%, transparent 50%);
  bottom:10px;
  right:10px;
}
.linearGradient::after {
  background:linear-gradient(to top left,yellow 49%, transparent 50%);
  top:10px;
  left:10px;
}

<div class="linearGradient"></div>

使用 html2canvas 的工作代码：

https://jsfiddle.net/k79ybnup/1/

Answer 2

似乎有使用 svg 的替代方案。

只需将其以任何方式放入您需要条纹的元素中， html2canvas 将相应地渲染它。

<svg style="width:100%, height:100%" xmlns="http://www.w3.org/2000/svg">
    <pattern
      id="pattern-checkers"
      x="0"
      y="0"
      width="100%"
      height="10"
      patternUnits="userSpaceOnUse"
      patternTransform="rotate(145)"
    >
      <line
        x1="0"
        y1="7"
        x2="100%"
        y2="7"
        stroke="#F3817F"
        strokeDasharray="8 4"
      />
    </pattern>
    <rect
      x="0%"
      y="0"
      width="100%"
      height="100%"
      fill="url(#pattern-checkers)"
    />
  </svg>