html5 - para - propiedad alt imagen

Cómo convertir el píxel de la imagen en forma de curva en lienzo

Question

Tengo ese tipo de imagen

Quiero que lo que estamos viendo líneas rectas en la imagen (en realidad, que son píxeles), debe convertirse en la curva en S. He implementado una curva de tipo C utilizando lienzo y sus propiedades, pero no puedo hacer la curva en S.

Por favor ayudame para esto.

Answer 1

Si te entiendo correctamente, ¿quieres que cada línea vertical siga una "S"?

Si ese es el caso, puede usar f.ex. Math.sin() combinado con drawImage() y sus parámetros de recorte para dividir la imagen por columna de píxel mientras desplaza la división en función de sin ().

Las fórmulas clave son:

var step = Math.PI * 2 / w;

esto mapea un círculo completo al ancho del lienzo para que cuando lleguemos al final volveremos al punto de inicio, en este caso formando una curva en S.

var y = Math.sin(step * x) * scale;

Esto calcula el desplazamiento en el eje Y en función del valor de paso calculado previamente, ahora vinculado a la posición x. Esto produce un valor entre -1 y 1, así que tenemos que escalarlo. La escala representa el radio máximo en número de píxeles.

Ejemplo

var ctx = c.getContext("2d");           // just some inits for demo
var img = new Image;
img.onload = slice;
img.src = "//i.stack.imgur.com/UvqUP.gif";

function slice() {
  var w = c.width = this.width;
  var h = c.height = this.height;
  var step = Math.PI * 2 / w;           // full circle / width of canvas
  var scale = 75;                       // max displacement on y
  
  for(var x = 0; x < w; x++) {
    ctx.drawImage(this,
      x, 0, 1, h,                       // source line from image
      x, Math.sin(step*x)*scale, 1, h); // displaced line
  }
}

<canvas id=c></canvas>

En el eje x (obviamente no es tan visible en este caso, ya que los cambios ocurren a lo largo de las líneas y hay otros métodos que se podrían usar, como sobre-dibujar con una forma de s en cada extremo):

var ctx = c.getContext("2d");           // just some inits for demo
var img = new Image;
img.onload = slice;
img.src = "//i.stack.imgur.com/UvqUP.gif";

function slice() {
  var w = c.width = this.width;
  var h = c.height = this.height;
  var step = Math.PI * 2 / h;           // full circle / width of canvas
  var scale = 75;                       // max displacement on y
  
  for(var y = 0; y < h; y++) {
    ctx.drawImage(this,
      0, y, w, 1,                       // source line from image
      Math.sin(step*y)*scale, y, w, 1); // displaced line
  }
}

<canvas id=c></canvas>