在代码点火器中裁剪和上传图像

Question

在我的一个项目中，我想允许用户在个人资料中上传他/她的照片。在上传照片时，我想允许他们根据自己的选择裁剪图像，当他们单击更新个人资料按钮时，我只想上传裁剪后的图像作为他们的个人资料图像。我正在CI中开发此应用程序。谁能帮我怎么做。我用过jquery。Jcrop.js用于裁剪图像的库。我可以使用以下代码裁剪图像，但是当我单击更新按钮时，它将上传原始图像而不是裁剪的图像。

<input type="file" href="#" class="selectBtn loginlink image_class" name="profilepic" id="profilepic" onChange="fileSelectHandler()"> 
<img id="preview" />
<input type="hidden" class="info1" id="filesize" name="filesize" />
<input type="hidden"  class="info1" id="filetype" name="filetype" />
<input type="hidden"  class="info1" id="filedim" name="filedim" />
<input type="hidden" class="info1" id="w" name="w" />
<input type="hidden" class="info1" id="h" name="h" />
<input type="hidden" id="x1" name="x1" />
<input type="hidden" id="y1" name="y1" />
<input type="hidden" id="x2" name="x2" />
<input type="hidden" id="y2" name="y2" />

下面是裁剪图像的JavaScript代码

function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB'];
if (bytes == 0)
return 'n/a';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];

} ;

// check for selected crop region
function checkForm() {
if (parseInt($('#w').val()))
return true;
$('.error').html('Please select a crop region and then press    Upload').show();
return false;
}
;
// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
$('#x1').val(e.x);
$('#y1').val(e.y);
$('#x2').val(e.x2);
$('#y2').val(e.y2);
$('#w').val(e.w);
$('#h').val(e.h);
}
;
// clear info by cropping (onRelease event handler)
function clearInfo() {
$('.info #w').val('');
$('.info #h').val('');
}
;
// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api, boundx, boundy;

function fileSelectHandler() {
// get selected file
var oFile = $('#image_file')[0].files[0];
// hide all errors
$('.error').hide();
// check for image type (jpg and png are allowed)
var rFilter = /^(image/jpeg|image/png)$/i;
if (!rFilter.test(oFile.type)) {
$('.error').html('Please select a valid image file (jpg and png are allowed)').show();
return;
}
// check for file size
if (oFile.size > 250 * 1024) {
$('.error').html('You have selected too big file, please select a one smaller image file').show();
return;
}
if (oFile.size < 300 * 300) {
$('.error').html('You have selected too small file, please select a one bigger image file').show();
return;
}
// preview element
var oImage = document.getElementById('preview');
// prepare HTML5 FileReader
var oReader = new FileReader();
oReader.onload = function (e) {
// e.target.result contains the DataURL which we can use as a source of the image
oImage.src = e.target.result;
oImage.onload = function () { // onload event handler
// display step 2
$('.step2').fadeIn(500);
// display some basic image info
var sResultFileSize = bytesToSize(oFile.size);
$('#filesize').val(sResultFileSize);
$('#filetype').val(oFile.type);
$('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
// destroy Jcrop if it is existed
if (typeof jcrop_api != 'undefined') {
jcrop_api.destroy();
jcrop_api = null;
$('#preview').width(oImage.naturalWidth);
$('#preview').height(oImage.naturalHeight);
}
setTimeout(function () {
// initialize Jcrop
$('#preview').Jcrop({
minSize: [32, 32], // min crop size
aspectRatio: 1, // keep aspect ratio 1:1
bgFade: true, // use fade effect
bgOpacity: .3, // fade opacity
onChange: updateInfo,
onSelect: updateInfo,
onRelease: clearInfo
}, function () {
// use the Jcrop API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the Jcrop API in the jcrop_api variable
jcrop_api = this;
});
}, 3000);
};
};
// read selected file as DataURL
oReader.readAsDataURL(oFile);
}

下面是我的控制器代码

$config1['upload_path'] = './mobileapps/supporter/upimages/candidate/images/';
$config1['allowed_types'] = '*';
$config1['encrypt_name'] = true;
$this->load->library('upload', $config1);
if (!$this->upload->do_upload('profilepic')) {
$error = array('error' => $this->upload->display_errors());
print_r($error);
exit;
} else {
$image_data = $this->upload->data();
$image = $image_data['file_name'];
$target1 = './mobileapps/supporter/upimages/candidate/images/' . $image;
$config1['source_image'] = $config1['upload_path'] . '/' .     $image_data['file_name'];
$config1['x_axis'] = $this->input->post('x1');
$config1['y_axis'] = $this->input->post('y1');
$config1['maintain_ratio'] = FALSE;
$config1['width'] = $this->input->post('w');
$config1['height'] = $this->input->post('h');
$config1['quality'] = '90%';
$this->load->library('image_lib', $config1);
if (!$this->image_lib->crop()) {
echo $this->image_lib->display_errors();
}else{
echo 'else';
}
}

Answer 1

使用此代码Ingiter 图像操作。希望能工作。这是对我的工作

$config['image_library'] = 'imagemagick';
$config['library_path'] = '/usr/X11R6/bin/';
$config['source_image'] = '/path/to/image/mypic.jpg';
$config['x_axis'] = 100;
$config['y_axis'] = 60;
$this->image_lib->initialize($config);
if ( ! $this->image_lib->crop())
{
echo $this->image_lib->display_errors();
}