如何为渐变背景 php/html5 保存画布？答案

【问题标题】：how to save canvas for gradient background php/html5?如何为渐变背景 php/html5 保存画布？
【发布时间】：2023-03-28 04:50:01
【问题描述】：

我正在尝试保存渐变线性背景。我正在使用https://github.com/niklasvh/html2canvas/releases 的插件。

该代码适用于纯色背景颜色和图像，但在我使用 css background-linear-gradient 时不起作用。

我怎样才能保存这个画布图像？

//已编辑：

我还有一个错误

我想保存从数据库加载的数据，所以我在数据库之间循环并显示内容。如何将图片一张一张的保存下来？

【问题讨论】：

你能解释一下你已经尝试过什么，并展示你的代码吗？
在browser-compatibility section 的readme 中，您可以阅读：“由于每个CSS 属性都需要手动构建才能获得支持，因此有许多属性尚不受支持。” background-image 的渐变就是这些。您只需要自己编写或等到有人为 html2canvas 库编写。
如果你有一个固定的渐变来渲染，首先在画布元素上渲染它很容易，然后将此画布的 dataURI 版本设置为你的 css 的背景图像。但考虑到 css 渐变语法的复杂性，我想将所有可能的值都放到画布上要困难得多。
我已经编辑了我的问题。
@TheJokerAeZ，我看不出您编辑的部分与原始问题之间的关系。请回滚编辑并在您的其他问题中发布其他问题。

标签： php html canvas

【解决方案1】：

在 html2canvas 自述文件的浏览器兼容性部分，您可以阅读：

由于每个 CSS 属性都需要手动构建才能得到支持，因此是许多尚不支持的属性。

background-image 的渐变就是这些。

您只需要自己编写或等到有人为 html2canvas 库编写代码。

如果你有一个固定的渐变来渲染，首先在画布元素上渲染它很容易，然后将此画布的 dataURI 版本设置为你的 css 的背景图像。

var renderGradients = function(elem){
  // get the size of your element
  var rect = elem.getBoundingClientRect();
  // create a canvas and set it to the same size as the element
  var canvas = document.createElement('canvas');
  canvas.width = rect.width;
  canvas.height = rect.height;
  
  var ctx = canvas.getContext('2d');
  // create a new gradient, the size of our element
  var gradient = ctx.createLinearGradient(0,0,rect.width,rect.height);
  // add the colors we have in our style
  gradient.addColorStop(0, 'blue');
  gradient.addColorStop(1, 'red');
  
  ctx.fillStyle = gradient;
  // draw a rect with our gradient
  ctx.fillRect(0, 0, rect.width, rect.height);
  // set our element's background-image to the canvas computed gradient
  elem.style.backgroundImage = 'url('+canvas.toDataURL()+')';

  // now call html2canvas
  html2canvas(elem, {onrendered : function(can){
      document.body.appendChild(can);
    }});
  }

renderGradients(cont);

#cont {background-image: linear-gradient( 90deg, blue, red );}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<div id="cont">
  Some content
</div>
html2canvas result : <br>

但鉴于 css 渐变语法的复杂性，制作将现有 CSS 背景图像渐变转换为画布版本的东西要困难得多。 _{如果有人想做这个，我很乐意阅读它。}所以你必须坚持使用硬编码的渐变值。

【讨论】：