Comment rogner une forme personnalisée en utilisant Javascript HTML5

Question

Comment pouvons-nous découper une forme personnalisée à partir d'une image en utilisant JavaScript?

Essentiellement, je veux que l'utilisateur puisse découper un visage d'une photo.

Quelque chose comme www.jibjab.com, ils le font avec Flash nous devons le faire en JS sur le canvas HTML5.

Des idées?

Answer 1

Essayez quelque chose comme ceci :

  body {
    margin: 0px;
    padding: 0px;
  }
  #myCanvas {
    border: 1px solid #9C9898;
  }

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  // begin custom shape
  context.beginPath();
  context.moveTo(170, 80);
  context.bezierCurveTo(130, 100, 130, 150, 230, 150);
  context.bezierCurveTo(250, 180, 320, 180, 340, 150);
  context.bezierCurveTo(420, 150, 420, 120, 390, 100);
  context.bezierCurveTo(430, 40, 370, 30, 340, 50);
  context.bezierCurveTo(320, 5, 250, 20, 250, 50);
  context.bezierCurveTo(200, 5, 150, 20, 170, 80);

  // complete custom shape
  context.closePath();
  context.lineWidth = 5;
  context.strokeStyle = 'blue';
  context.stroke();