CODEWITHSUNDEEP
javascriptimage-processingcanvashtml5-canvas
megaSteve4
megaSteve4

Reputation: 1760

Crop images on a web page in a non linear / rectangular manner so any form of polygon

Curious to hear other people's ideas.

I would like to have this scenario...

  1. User uploads image (done easily in php my scripting language of choice)
  2. They can then crop the image in their browser but not just a sub-selected rectangle to be able to trace, a person for example, and then 'cut' or 'isolate' them so they can then be added to a different background for example.

So flash was the first thing that sprung to mind but I would like to avoid that if poss ( and keep things iPad friendly) so I guess that leaves html5/ css3 / JavaScript and probably most importantly html canvas.

I would prefer to avoid any thing like java etc and keep this to simple web technologies ?

I have had a quick google but nothing seemed to jump.

Suggestions welcome!!

Upvotes: 2

Views: 924

Answers (1)

Kornel
Kornel

Reputation: 100200

You can do it with canvas, specifically clipping path:

var img = new Image();
var context = canvas.getContext('2d');

img.onload = function(){
  context.beginPath();
  context.moveTo(10,10);
  context.lineTo(300,200);
  context.lineTo(100,150);
  context.clip();
  context.drawImage(img, 0,0)
}

img.src = 'example.png';

Of course you'll need to write some UI that lets user set the points. You can either get the image directly from <input> via input.files[0] and FileReader API and then send it with XHR2, or get it after uploading it to the server.

Upvotes: 4

Related Questions