Php Javascript Image Upload and Edit

Question

i'm looking for a Php / Javascript example script which can help me and be the base to build a tool for uploading images and than drag/rotate/scale and position them under a mask / frame. Similar to tools used in custom photo print sites. Any help?

Answer 1

If you are looking to learn how to code an uploader yourself, there are a number of good tutorials you can find. Here is a basic one . You can also find some pre-built ones here and here . You can also find jQuery plugins that will do it for you here and here .

For the image manipulation, you can learn how to code one here and here . Or you can use a pre-built one that can be found here .

I know a lot of people don't like giving answer for things that you can find easily on a search engine. So I recommend next time explaining a little more if you have searched for something but cannot find what you are looking for. If you are simply asking for recommendations before doing a search yourself, odds are this will get locked before you can get any answers as they will all be subjective.

Answer 2

please try this example some as like your requirement

<form method="POST" enctype="multipart/form-data">
<input type="file" id="file">
<div id="preview"></div>
<br>
<a href="#" id="counter"><- counter</a>
    <select id="degree">
        <option>90</option>
        <option>45</option>
    </select>
<a href="#" id="clockwise">clockwise -></a>
<hr>
<button type="submit">save image</button>

css

#preview img {
max-height: 300px;
max-width: 300px;
}

script

$('a').click(function(){
var a = $('img').getRotateAngle();
var d = Math.abs($('#degree').val());

if($(this).attr('id') == 'counter'){
   //d = -Math.abs(+a - +d);
    d = a - d;
}
else{d = +a + +d;}

$('img').rotate({animateTo:d});
});

/* image preview */
$('#file').change(function(){
var oFReader = new FileReader();
oFReader.readAsDataURL(this.files[0]);
console.log(this.files[0]);
oFReader.onload = function (oFREvent) {
    $('#preview').html('<img src="'+oFREvent.target.result+'">');
};
});

and check fiddle http://jsfiddle.net/AxRJh/