Solved

Very easy way to crop and resize image with html

Posted on 2014-12-17
7
47 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
Scale it in WD Gold

With up to ten times the workload capacity of desktop drives, WD Gold hard drives employ advanced technology to deliver among the best in reliability, capacity, power efficiency and performance.

 

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 108

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
There is a huge demand for CodeIgniter among the PHP web developers due to its dynamic features and benefits these days. It is one of most popular and agile open source PHP framework for creating robust web applications in PHP web development field.…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

910 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now