Solved

Very easy way to crop and resize image with html

Posted on 2014-12-17
7
61 Views
Last Modified: 2016-05-20
We have a over 500 staff members that we want to add there photos to AD so it will show up on Outlook emails.

But we want the users to crop and resize there own photos that they pick. The crop size MOST be 96x96 and the file MOST be less then 10k is size and MUST be in jpg format.

Anyone have a stupid easy php or jquery that will do this.

1. user pick there own photo.
2. user can resize photo and have a max crop size of 96x96
3. The saved photo must be less then 10k size and in JPG format.
4. The saved file must be the user AD username.

the file name can be gotten from this

$user_login = substr($_SERVER['LOGON_USER'], strrpos($_SERVER['LOGON_USER'],'\\')+1, strlen($_SERVER['LOGON_USER'])-strrpos($_SERVER['LOGON_USER'],'\\'));

Open in new window

0
Comment
Question by:armasmike
  • 3
  • 2
7 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40504928
0
 

Author Comment

by:armasmike
ID: 40505031
0
 
LVL 58

Expert Comment

by:Gary
ID: 40505037
What you want to do is not easy, the first plugin is as easy as it gets.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:armasmike
ID: 40505043
I download the zip file but how do i set it up. Like the demo page and from there i can change things. I do like the options like maxsize and stuff
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40505100
Create a folder in your webroot named crop

Copy the src folder from the zip to the crop folder

In the crop folder create another folder named uploads and make sure it has full write permissions


In the crop folder create a file named crop.php and add this code to it.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
              
<script src="src/jquery.picture.cut.js"></script>   
<style>
.ui-dialog {
top:50px !important
}
</style>
</head>
<body>
<div id="container_image"></div>     


<script>
              $("#container_image").PictureCut({
                  InputOfImageDirectory       : "image",
                  PluginFolderOnServer        : "/crop",
                  FolderOnServer              : "/crop/uploads/",
                  EnableCrop                  : true,
                  CropWindowStyle             : "Bootstrap"
              });
</script>
</body>
</html>

Open in new window


Use the parameters here to set your sizes etc
http://picturecut.tuyoshi.com.br/docs/#Installation
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40506018
At thecenter intersection of the Venn diagram of "easy," "good," and "free" there is a pink unicorn.  Don't feel bad if you've never seen it -- neither have I.

My recommendation about this task:  Be realistic about how often it will be repeated.  After the first process, there will be a few dozen or so each year, at most.  That's not worth automating.  Instead, get an intern and have the intern do it all by hand, meticulously documenting the process.  Then when the intern is gone, you can give the task to the next intern, who can follow the first intern's documentation.  The alternatives are really costly and time-consuming, requiring a thorough knowledge of image processing.  An intern with basic Photoshop skills and a willingness to learn "actions" can run through an assignment like this in a couple of weeks and all you'll have to buy is coffee!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question