如何保存canvas的渐变背景php / html5？ [英] how to save canvas for gradient background php/html5?

问题描述

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

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

//已编辑：

我有另一个错误

/ p>

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

解决方案

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

由于每个CSS属性都需要手动构建以支持，所以
是一些属性，尚未支持。

background-image 的渐变就是这些。

您只需自行编写或等待某人为html2canvas图书馆。

有一个固定的渐变来渲染，很容易先在canvas元素上渲染，并将此canvas的dataURI版本设置为css的背景图片。

  var renderGradients = function（elem）{//获取元素的大小var rect = elem.getBoundingClientRect（）; //创建一个画布并将其设置为与元素相同的大小var canvas = document.createElement（'canvas'）; canvas.width = rect.width; canvas.height = rect.height; var ctx = canvas.getContext（'2d'）; //创建一个新的渐变，我们的元素的大小var gradient = ctx.createLinearGradient（0,0，rect.width，rect.height）; //添加我们的样式中的颜色gradient.addColorStop（0，'blue'）; gradient.addColorStop（1，'red'）; ctx.fillStyle = gradient; //用我们的梯度绘制一个矩形ctx.fillRect（0，0，rect.width，rect.height）; //将我们的元素的背景图像设置为canvas计算的渐变elem.style.backgroundImage ='url（'+ canvas.toDataURL（）+'）'; //现在调用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>部分内容< / div> html2canvas结果：< br>  

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

I am trying to saving gradient linear background. I am using a plugin of https://github.com/niklasvh/html2canvas/releases.

The code is working for solid background color and images but not when I use css background-linear-gradient.

and how can i save this canvas image?

//EDITED:

I have another bug

I would like to save data which is loading from database, so i am looping between the database and showing content. How can i save the pictures one by one showing the content?

解决方案

In the browser-compatibility section of the html2canvas' readme you can read :

As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.

background-image 's gradients are of those.

You will just have to write it yourself or wait until someone does for the html2canvas library.

If you've got a fixed gradient to render, it's quite easy to render it on a canvas element first, and set the dataURI version of this canvas to the background-image of your 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>

But given the complexity of the css gradients syntax, it's much harder to make something that will convert an already existing CSS background-image gradient into a canvas version. _{If someone wants to make this, I'd be glad to read it.} So you will have to stick with hard-coded gradient values.

这篇关于如何保存canvas的渐变背景php / html5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！