Html2canvas: Linear-Gradient with Angle (0deg) sem renderização

Criado em 11 mar. 2013 · 8Comentários · Fonte: niklasvh/html2canvas

Oi !

Em primeiro lugar, um bom plugin aqui! Eu só precisava de algo assim;)

Eu só tenho uma pergunta sobre gradiente.

Os gradientes são renderizados quando o ângulo é especificado com uma palavra (Top, Left, ...), mas não quando coloco um ângulo em Degree (por exemplo: gradiente linear (0deg, rgb (0, 0, 0) 0% , rgb (255, 255, 255) 100%) não funcionará).

Existe uma maneira de corrigir isso ? Porque eu uso muitos gradientes com valores de graus :)

Obrigado !

Bug

Fonte

nammu

Todos 8 comentários

Obrigado pela informação.

Existe uma maneira de consertar, mas no momento não tenho tempo para isso. Vou adicioná-lo à lista de pendências e voltar quando tiver tempo.

niklasvh em 14 mar. 2013

Provavelmente, nenhum dos gradientes funciona.
Estamos usando uma notação diferente de 0 graus: gradiente linear (para baixo, cor, cor);

oosterholt em 18 jul. 2013

Existe alguma atualização sobre este @niklasvh , estou enfrentando o mesmo problema.

abhasg em 8 abr. 2014

1 para resolver este problema. @niklasvh, você pode nos dar uma pista para tentar resolver isso?

fbotti em 19 jun. 2014

Existe uma solução simples para isso, basta adicionar este if antes de existir a troca de posição no LinearGradientContainer

if (imageData.args[0].indexOf('deg') != -1) {
  var rad = parseFloat(imageData.args[0].substr(0, imageData.args[0].length - 3)) * (Math.PI / 180);
  //Finds y start and scales it between 0 and 1
  this.y0 = (Math.cos(rad) + 1) / 2;
  //Flips y1
  this.y1 = 1 - this.y0;
  //Same as for y0 but flip axis to match with css gradient
  this.x0 = (-Math.sin(rad) + 1) / 2;
  this.x1 = 1 - this.x0;
} else {
  imageData.args[0].split(" ").reverse().forEach(function(position) {
     switch (position) {
          ........
     }
}