javascript - Make selected area on uploaded area transparent -

javascript - Make selected area on uploaded area transparent -

i uploading image form (in wordpress), , want allow users utilize pencil tool draw line around area. think of lasso tool in photoshop. users can 'mark' area modified.

what see, if possible utilize either imagemagik, gd, or client side js library find selected area, , convert within transparent.

here illustration image. person wants upload image, , using uploader, marked reddish line select transparent.

so image within reddish line, should detected imagemagik/gd/client js, , in there transparent.

i not find see if possible or not. on server using php can there if needed imgmagik/gd if possible. need know if can take within of reddish area , create transparent. prefer, if find client side js library or jquery plugin, allow end user on client side via image upload utility. , upload final modified version of image.

any help or input on appreciated.

there's few tools out there using html5's canvas & imagemagick. here's how implement solution.

display uploaded image canvas element on top. utilize javascript match width & height, , bind event listeners collect mouse movements.

class="lang-js prettyprint-override">var mydrawing = { // new drawing event. init points & start canvas path (for feedback) "start" : function(evt) { var point = [evt.layerx, evt.layery]; var ctx = this.getcontext("2d"); ctx.beginpath(); ctx.linewidth = "2"; ctx.strokestyle = "red"; ctx.moveto(point[0], point[1]); this.points = [point]; }, "update" : function(evt) { if(this.points) { this.getcontext("2d").lineto([evt.layerx, evt.layery]); this.points.push([evt.layerx, evt.layery]); // collect latest point } }, "end" : function(evt) { var ctx = this.getcontext("2d"); ctx.lineto(evt.layerx, evt.layery); ctx.closepath(); ctx.stroke(); this.points.push([evt.layerx, evt.layery]) // send points server via ajax myajaxfunctionhere(this.points); } } var c = document.getelementbyid("canvas"); c.addeventlistener("mousedown", mydrawing.start, false); c.addeventlistener("mousemove", mydrawing.update, false); c.addeventlistener("mouseup", mydrawing.end, false);

not best, gives user feed back.

on backend, normalize given points list of (x,y) associated tuples.

class="lang-php prettyprint-override">// illustration of imagickdraw expecting. $points = array( array('x' => 193, 'y' => 103), array('x' => 192, 'y' => 102), // .... );

at point, can either draw image mask, , apply image imagick::compositeimage. or draw straight on image chroma key color & swap transparency.

class="lang-php prettyprint-override">$img = new imagick('/path/to/uploaded/image.png'); // load image $chromakey = new imagickpixel('#6bfd00'); // define chroma $draw = new imagickdraw(); // $draw->setfillcolor($chromakey); // fill chroma $draw->polygon($points); // draw point $img->drawimage($draw); // apply image $img->painttransparentimage($chromakey, 0.0, 0.1); // swap chroma transparent $img->writeimage('/path/to/generated/image.png'); // save disk

javascript php imagemagick gd image-uploading