Question

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

代码适用于纯色背景色和图像，但在使用css background-linear-gradient时却没有。

如何保存此画布图像？

// EDITED：

我有另一个错误

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

Answer 1

在html2canvas＆＃39;的浏览器兼容性部分中。自述文件，你可以阅读：

由于每个CSS属性都需要手动构建才能得到支持是一些尚不支持的属性。

background-image的渐变就是那些。

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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

但是考虑到css渐变语法的复杂性，制作能够将已经存在的CSS背景图像渐变转换为画布版本的东西要困难得多。 _{如果有人想要这样做，我很高兴看到它。}所以你必须坚持使用硬编码的渐变值。

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

1 个答案: