PDA

View Full Version : Ext.ux.imageEditor - canvas based image editor



timriedel
10 Sep 2010, 5:19 AM
Hi to everybody,

Ext.ux.imageEditor is a canvas based image editing tool for Ext 3+. It supports :


crop image
rotate image
scale image
place text

All these functions need no server support, all the image manipulation is done via canvas. I have currently taken out the image saving routines - which needs server support then.

There is currently no browser detection, it is known to work under FF3.6+, Chrome 5 and Safari 5+.

The code is far away from being final - and this is my first contribution to the community, so I am really looking forward to your comments and thoughts.

Released under GPL 3.0.

Preview is available here: http://www.eyeworkers.de/uxImageEditor

Bye, Tim

wemerson.januario
11 Sep 2010, 10:30 AM
nice work congratulation

talha06
12 Sep 2010, 2:10 PM
great work mate, thanx for sharing..

kimosabi
28 Sep 2010, 8:22 PM
Thanks alot for sharing.

Anyone wanting tips on saving to the server, I used the following code to save the image to the server.

On the PHP side you can save it straight to file as png, or do what I do and convert it to jpg.

JS


var data = document.getElementById('canvas').toDataURL("image/png");
data=data.replace(/^data:image\/(png|jpg);base64,/, "");

Ext.Ajax.request({
url: 'banners/save_crop',
success: function(){
win.close();
},
failure: function(){

},
params: { data: data}
});


PHP


$image=base64_decode($_POST['data']);
//
$png = imagecreatefromstring($image);
if($png)
{
imagejpeg($png,$new_image_path , 100);
imagedestroy($image);
$return=array('success'=>true);
}
else
{
$return=array('success'=>false);
}
echo json_encode($return);

Seana
29 Sep 2010, 5:47 AM
Nice work, I did notice that in the demo you posted in Chrome 6.0.472.63(I haven't tested else where) there is a little bit of an odd behavior with-in the add text settings. When adding text setting the size isn't applied until you select a font face. Every time you set the size you must then set the font face, even if it is only re-selecting the currently selected font.

timriedel
7 Oct 2010, 2:07 AM
Thanks for the bug report, Sean! I fixed the problem and udated the attached package.

chriss
8 Oct 2010, 6:55 AM
You forgot to take out the console and it crashes ( at least for me, in FF )



change: function(slider, value) {
console.log(this);
Ext.ux.imageEditor.prototype.doRotate(value);
}

carl23934
8 Oct 2010, 10:24 AM
This is excellent! Thanks for sharing!

The only issue is that rotate doesn't seem to work for me, or at least it wasn't intuitive enough for me to figure it out.

I'm using Firefox 3.6.10.

timriedel
10 Oct 2010, 3:43 AM
Sorry - it was too late when I built the package ;-)

I have taken out the console log and made some other minor fixes - so rotating should work now.