Added Better Implementation for Functions that Crop Images

1.10.x
José Loguercio 11 years ago
parent 6242ea4333
commit 8fad0b8f6b
  1. 2
      app/Resources/public/css/base.css
  2. 37
      main/admin/user_add.php
  3. 25
      main/admin/user_edit.php
  4. 23
      main/auth/profile.php
  5. 47
      main/course_info/infocours.php
  6. 78
      main/inc/lib/course.lib.php
  7. 45
      main/inc/lib/image.lib.php
  8. 94
      main/inc/lib/usermanager.lib.php

@ -1357,7 +1357,7 @@ div.attendance-calendar-add div.row div.formw,div.attendance-calendar-edit div.r
a.unread {
font-weight:bold;
}
.croppCanvas {
.cropCanvas {
max-width: 300px;
max-height: 150px;
}

@ -46,14 +46,23 @@ $htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/d
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
var $image = $("#previewImage");
var $input = $("[name=\'cropResult\']");
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture").files[0]);
oFReader.readAsDataURL(document.getElementById("picture_form").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("previewImage").src = oFREvent.target.result;
$("#labelCroppImage").html("'.get_lang('Preview').'");
var $image = $("#previewImage");
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
// Destroy cropper
$image.cropper("destroy");
// Replace url
$image.attr("src", this.result);
$image.cropper({
aspectRatio: 1 / 1,
@ -63,7 +72,7 @@ $(document).ready(function() {
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$("[name=\'croppResult\']").val(e.x+","+e.y+","+e.width+","+e.height);
$input.val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
@ -172,16 +181,16 @@ $form->addElement('file', 'picture', get_lang('AddImage'), array('id' => 'pictur
$allowed_picture_types = array ('jpg', 'jpeg', 'png', 'gif');
$form->addHtml(''
. '<div class="form-group">'
. '<label for="croppImage" id="labelCroppImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="croppImage" class="croppCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '<div class="form-group">'
. '<label for="cropImage" id="labelCropImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="cropImage" class="cropCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '</div>'
. '');
$form->addHidden('croppResult', '');
. '</div>'
. '</div>'
. '');
$form->addHidden('cropResult', '');
$form->addRule('picture', get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')', 'filetype', $allowed_picture_types);
@ -443,7 +452,7 @@ if ($form->validate()) {
$user_id,
$_FILES['picture']['name'],
$_FILES['picture']['tmp_name'],
$user['croppResult']
$user['cropResult']
);
UserManager::update_user(
$user_id,

@ -72,14 +72,23 @@ $htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/d
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
var $image = $("#previewImage");
var $input = $("[name=\'cropResult\']");
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture").files[0]);
oFReader.readAsDataURL(document.getElementById("picture_form").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("previewImage").src = oFREvent.target.result;
$("#labelCroppImage").html("'.get_lang('Preview').'");
var $image = $("#previewImage");
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
// Destroy cropper
$image.cropper("destroy");
// Replace url
$image.attr("src", this.result);
$image.cropper({
aspectRatio: 1 / 1,
@ -89,7 +98,7 @@ $(document).ready(function() {
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$("[name=\'croppResult\']").val(e.x+","+e.y+","+e.width+","+e.height);
$input.val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
@ -189,15 +198,15 @@ $allowed_picture_types = array ('jpg', 'jpeg', 'png', 'gif');
$form->addHtml(''
. '<div class="form-group">'
. '<label for="croppImage" id="labelCroppImage" class="col-sm-2 control-label"></label>'
. '<label for="cropImage" id="labelCropImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="croppImage" class="croppCanvas">'
. '<div id="cropImage" class="cropCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '</div>'
. '</div>'
. '');
$form->addHidden('croppResult', '');
$form->addHidden('cropResult', '');
$form->addRule(
'picture',
@ -376,7 +385,7 @@ if ($form->validate()) {
$user_id,
$_FILES['picture']['name'],
$_FILES['picture']['tmp_name'],
$user['croppResult']
$user['cropResult']
);
}

@ -35,14 +35,23 @@ $htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/d
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
var $image = $("#previewImage");
var $input = $("[name=\'cropResult\']");
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture_form").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("previewImage").src = oFREvent.target.result;
$("#labelCroppImage").html("'.get_lang('Preview').'");
var $image = $("#previewImage");
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
// Destroy cropper
$image.cropper("destroy");
// Replace url
$image.attr("src", this.result);
$image.cropper({
aspectRatio: 1 / 1,
@ -52,7 +61,7 @@ $(document).ready(function() {
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$("[name=\'croppResult\']").val(e.x+","+e.y+","+e.width+","+e.height);
$input.val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
@ -238,15 +247,15 @@ if (is_profile_editable() && api_get_setting('profile', 'picture') == 'true') {
);
$form->addHtml(''
. '<div class="form-group">'
. '<label for="croppImage" id="labelCroppImage" class="col-sm-2 control-label"></label>'
. '<label for="cropImage" id="labelCropImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="croppImage" class="croppCanvas">'
. '<div id="cropImage" class="cropCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '</div>'
. '</div>'
. '');
$form->addHidden('croppResult', '');
$form->addHidden('cropResult', '');
$form->add_progress_bar();
if (!empty($user_data['picture_uri'])) {
$form->addElement('checkbox', 'remove_picture', null, get_lang('DelImage'));
@ -536,7 +545,7 @@ if ($form->validate()) {
api_get_user_id(),
$_FILES['picture']['name'],
$_FILES['picture']['tmp_name'],
$user_data['croppResult']
$user_data['cropResult']
);
if ($new_picture) {

@ -50,24 +50,33 @@ $htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/d
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
var $image = $("#previewImage");
var $input = $("[name=\'cropResult\']");
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture").files[0]);
oFReader.readAsDataURL(document.getElementById("picture_form").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("previewImage").src = oFREvent.target.result;
$("#labelCroppImage").html("'.get_lang('Preview').'");
var $image = $("#previewImage");
$("#labelCropImage").html("'.get_lang('Preview').'");
$("#cropImage").addClass("thumbnail");
// Destroy cropper
$image.cropper("destroy");
// Replace url
$image.attr("src", this.result);
$image.cropper({
aspectRatio: 4 / 3,
aspectRatio: 1 / 1,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$("[name=\'croppResult\']").val(e.x+","+e.y+","+e.width+","+e.height);
$input.val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
@ -167,15 +176,15 @@ $form->applyFilter('department_url', 'html_filter');
$form->addElement('file', 'picture', get_lang('AddPicture'), array('id' => 'picture', 'class' => 'picture-form'));
$form->addHtml(''
. '<div class="form-group">'
. '<label for="croppImage" id="labelCroppImage" class="col-sm-2 control-label"></label>'
. '<label for="cropImage" id="labelCropImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="croppImage" class="croppCanvas">'
. '<div id="cropImage" class="cropCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '</div>'
. '</div>'
. '');
$form->addHidden('croppResult', '');
$form->addHidden('cropResult', '');
$allowed_picture_types = array ('jpg', 'jpeg', 'png', 'gif');
$form->addRule('picture', get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')', 'filetype', $allowed_picture_types);
//$form->addElement('html', '<div class="form-group "><div class="col-md-2"></div> <div class="col-md-8 help-image">'.get_lang('UniqueAnswerImagePreferredSize200x150').'</div></div>');
@ -456,19 +465,17 @@ $form->setDefaults($values);
if ($form->validate() && is_settings_editable()) {
$updateValues = $form->exportValues();
// Sending image
if ($form->validate() && is_settings_editable()) {
// update course picture
$picture = $_FILES['picture'];
if (!empty($picture['name'])) {
$picture_uri = CourseManager::update_course_picture(
$course_code,
$picture['name'],
$picture['tmp_name'],
$updateValues['croppResult']
);
}
// update course picture
$picture = $_FILES['picture'];
if (!empty($picture['name'])) {
$picture_uri = CourseManager::update_course_picture(
$course_code,
$picture['name'],
$picture['tmp_name'],
$updateValues['croppResult']
);
}
$visibility = $updateValues['visibility'];
$deletePicture = isset($updateValues['delete_picture']) ? $updateValues['delete_picture'] : '';

@ -3134,17 +3134,18 @@ class CourseManager
}
//Crop the image to adjust 4:3 ratio
$croppedImage = self::crop_image($source_file, $cropParameters);
$croppedPath = $croppedImage->image_wrapper->path;
$image = new Image($source_file);
$image->crop($cropParameters);
//Resize the images in two formats
$medium = self::resize_picture($croppedPath, 85);
$normal = self::resize_picture($croppedPath, 300);
$medium = new Image($source_file);
$medium->resize(85);
$medium->send_image($course_medium_image, -1, 'png');
$result = $normal->send_image($course_image, -1, 'png');
$result = $medium && $medium->send_image($course_medium_image, -1, 'png') &&
$normal && $normal->send_image($course_image, -1, 'png');
$normal = new Image($source_file);
$normal->resize(300);
$normal->send_image($course_image, -1, 'png');
$result = $medium && $normal;
return $result ? $result : false;
}
@ -5378,67 +5379,6 @@ class CourseManager
return $send_to;
}
/**
* Resize a picture
*
* @param string file picture
* @param int size in pixels
* @todo move this function somewhere else image.lib?
* @return obj image object
*/
public static function resize_picture($file, $max_size_for_picture)
{
$temp = false;
if (file_exists($file)) {
$temp = new Image($file);
$image_size = $temp->get_image_size($file);
$width = $image_size['width'];
$height = $image_size['height'];
if ($width >= $height) {
if ($width >= $max_size_for_picture) {
// scale height
$new_height = round($height * ($max_size_for_picture / $width));
$temp->resize($max_size_for_picture, $new_height, 0);
}
} else { // height > $width
if ($height >= $max_size_for_picture) {
// scale width
$new_width = round($width * ($max_size_for_picture / $height));
$temp->resize($new_width, $max_size_for_picture, 0);
}
}
}
return $temp;
}
/**
* Crop a Image
*
* @author José Loguercio <jose.loguercio@beeznest.com>
* @param string file picture
* @param string crop Parameters (x, y, width, height)
* @return obj image object
*/
public static function crop_image($file, $cropParameters)
{
$image = false;
if (file_exists($file)) {
$image = new Image($file);
$image_size = $image->get_image_size($file);
$src_width = $image_size['width'];
$src_height = $image_size['height'];
$cropParameters = explode(",", $cropParameters);
$x = intval($cropParameters[0]);
$y = intval($cropParameters[1]);
$width = intval($cropParameters[2]);
$height = intval($cropParameters[3]);
$image->crop($x, $y, $width, $height, $src_width, $src_height);
}
return $image;
}
/**
* this function shows the form for sending a message to a specific group or user.

@ -33,24 +33,37 @@ class Image
}
}
public function resize(
$thumbw,
$thumbh,
$border = 0,
$specific_size = false
) {
$this->image_wrapper->resize($thumbw, $thumbh, $border, $specific_size);
public function resize($max_size_for_picture) {
$image_size = $this->get_image_size($this->path);
$width = $image_size['width'];
$height = $image_size['height'];
if ($width >= $height) {
if ($width >= $max_size_for_picture) {
// scale height
$new_height = round($height * ($max_size_for_picture / $width));
$this->image_wrapper->resize($max_size_for_picture, $new_height, 0);
}
} else { // height > $width
if ($height >= $max_size_for_picture) {
// scale width
$new_width = round($width * ($max_size_for_picture / $height));
$this->image_wrapper->resize($new_width, $max_size_for_picture, 0);
}
}
}
public function crop(
$x,
$y,
$width,
$height,
$src_width,
$src_height
) {
$this->image_wrapper->crop($x, $y, $width, $height, $src_width, $src_height);
public function crop($cropParameters) {
$image_size = $this->get_image_size($this->path);
$src_width = $image_size['width'];
$src_height = $image_size['height'];
$cropParameters = explode(",", $cropParameters);
$x = intval($cropParameters[0]);
$y = intval($cropParameters[1]);
$width = intval($cropParameters[2]);
$height = intval($cropParameters[3]);
$image = $this->image_wrapper->crop($x, $y, $width, $height, $src_width, $src_height);
return $image;
}
public function send_image(

@ -1620,22 +1620,27 @@ class UserManager
}
//Crop the image to adjust 1:1 ratio
$croppedImage = self::crop_image($source_file, $cropParameters);
$croppedPath = $croppedImage->image_wrapper->path;
$image = new Image($source_file);
$image->crop($cropParameters);
// Storing the new photos in 4 versions with various sizes.
$small = self::resize_picture($croppedPath, 22);
$medium = self::resize_picture($croppedPath, 85);
$normal = self::resize_picture($croppedPath, 200);
$big = new Image($croppedPath); // This is the original picture.
$ok = $small && $small->send_image($path.'small_'.$filename) &&
$medium && $medium->send_image($path.'medium_'.$filename) &&
$normal && $normal->send_image($path.$filename) &&
$big && $big->send_image($path.'big_'.$filename);
return $ok ? $filename : false;
$small = new Image($source_file);
$small->resize(22);
$small->send_image($path.'small_'.$filename);
$medium = new Image($source_file);
$medium->resize(85);
$medium->send_image($path.'medium_'.$filename);
$normal = new Image($source_file);
$normal->resize(200);
$normal->send_image($path.$filename);
$big = new Image($source_file); // This is the original picture.
$big->send_image($path.'big_'.$filename);
$result = $small && $medium && $normal && $big;
return $result ? $filename : false;
}
/**
@ -3030,67 +3035,6 @@ class UserManager
return false;
}
/**
* Resize a picture
*
* @param string file picture
* @param int size in pixels
* @todo move this function somewhere else image.lib?
* @return obj image object
*/
public static function resize_picture($file, $max_size_for_picture)
{
$temp = false;
if (file_exists($file)) {
$temp = new Image($file);
$image_size = $temp->get_image_size($file);
$width = $image_size['width'];
$height = $image_size['height'];
if ($width >= $height) {
if ($width >= $max_size_for_picture) {
// scale height
$new_height = round($height * ($max_size_for_picture / $width));
$temp->resize($max_size_for_picture, $new_height, 0);
}
} else { // height > $width
if ($height >= $max_size_for_picture) {
// scale width
$new_width = round($width * ($max_size_for_picture / $height));
$temp->resize($new_width, $max_size_for_picture, 0);
}
}
}
return $temp;
}
/**
* Crop a Image
*
* @author José Loguercio <jose.loguercio@beeznest.com>
* @param string file picture
* @param string crop Parameters (x, y, width, height)
* @return obj image object
*/
public static function crop_image($file, $cropParameters)
{
$image = false;
if (file_exists($file)) {
$image = new Image($file);
$image_size = $image->get_image_size($file);
$src_width = $image_size['width'];
$src_height = $image_size['height'];
$cropParameters = explode(",", $cropParameters);
$x = intval($cropParameters[0]);
$y = intval($cropParameters[1]);
$width = intval($cropParameters[2]);
$height = intval($cropParameters[3]);
$image->crop($x, $y, $width, $height, $src_width, $src_height);
}
return $image;
}
/**
* @author Isaac flores <isaac.flores@dokeos.com>
* @param string The email administrator

Loading…
Cancel
Save