CODEWITHSUNDEEP
javascriptphpimageuploadedit
Mars Spider
Mars Spider

Reputation: 9

Php Javascript Image Upload and Edit

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?

Upvotes: 0

Views: 7979

Answers (2)

Asif
Asif

Reputation: 647

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/

Upvotes: 0

captbrogers
captbrogers

Reputation: 494

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.

Upvotes: 2

Related Questions