使用 codeigniter 裁剪图像
我正在使用 jcrop 和 codeigniter 来允许用户裁剪他们上传的图像,我希望将图像裁剪为 90x60 的大小,但我尝试的任何方法似乎都不起作用,我当前的代码如下所示,
CONTROLLER
function save_crop() {
$this->load->library('image_lib');
$config['image_library'] = 'gd2';
//$config['library_path'] = '/usr/X11R6/bin/';
$config['source_image'] = './media/images/uploads/company_uploads/' . $this->input->post('image_name');
//$config['new_image'] = './media/images/uploads/company_uploads/cropped' . $this->input->post('image_name').'_'.time();
//die($config['source_image']);
$config['x_axis'] = $this->input->post('x');
$config['y_axis'] = $this->input->post('y');
$config['width'] = $this->input->post('w');
$config['height'] = $this->input->post('h');
$config['maintain_ration'] = TRUE;
$config['dynamic_output'] = TRUE;
$this->image_lib->initialize($config);
if(!$this->image_lib->crop()) {
echo $this->image_lib->display_errors();
} else {
echo "Success";
}
}
JAVASCRIPT
$('#jcrop_target').Jcrop({
onChange: showPreview,
onSelect: showCoords,
aspectRatio: 1,
addClass: 'custom',
maxSize: [90,60]
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
};
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
HTML
<?php if(isset($upload_data)) :?>
<?php if($upload_data['image_width'] > 90 || $upload_data['image_height'] > 60) : ?>
<p>Your image is a little large</p>
<form action="<?php echo base_url();?>employer/save_crop" method="post">
<div id="uploaded_image">
<img src="<?php echo base_url();?>media/images/uploads/company_uploads/<?php echo $upload_data['file_name'];?>" id="jcrop_target"/>
</div>
<div id="uploaded_preview">
<img src="<?php echo base_url();?>media/images/uploads/company_uploads/<?php echo $upload_data['file_name'];?>" id="preview"/>
</div>
<input type="hidden" name="x" id="x" />
<input type="hidden" name="y" id="y" />
<input type="hidden" name="x2" id="x2" />
<input type="hidden" name="y2" id="y2" />
<input type="text" name="w" id="w" />
<input type="text" name="h" id="h" />
<input type="hidden" name="image_name" value="<?php echo $upload_data['file_name'];?>"/>
<input type="submit" name="crop_image" value="Crop" />
</form>
<?php endif; ?>
<?php endif; ?>
I am working with jcrop and codeigniter to allow users to crop images that they upload, I want to the image t crop to a size of 90x60 but what ever I try nothing seems to work, my current code looks like this,
CONTROLLER
function save_crop() {
$this->load->library('image_lib');
$config['image_library'] = 'gd2';
//$config['library_path'] = '/usr/X11R6/bin/';
$config['source_image'] = './media/images/uploads/company_uploads/' . $this->input->post('image_name');
//$config['new_image'] = './media/images/uploads/company_uploads/cropped' . $this->input->post('image_name').'_'.time();
//die($config['source_image']);
$config['x_axis'] = $this->input->post('x');
$config['y_axis'] = $this->input->post('y');
$config['width'] = $this->input->post('w');
$config['height'] = $this->input->post('h');
$config['maintain_ration'] = TRUE;
$config['dynamic_output'] = TRUE;
$this->image_lib->initialize($config);
if(!$this->image_lib->crop()) {
echo $this->image_lib->display_errors();
} else {
echo "Success";
}
}
JAVASCRIPT
$('#jcrop_target').Jcrop({
onChange: showPreview,
onSelect: showCoords,
aspectRatio: 1,
addClass: 'custom',
maxSize: [90,60]
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
};
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
HTML
<?php if(isset($upload_data)) :?>
<?php if($upload_data['image_width'] > 90 || $upload_data['image_height'] > 60) : ?>
<p>Your image is a little large</p>
<form action="<?php echo base_url();?>employer/save_crop" method="post">
<div id="uploaded_image">
<img src="<?php echo base_url();?>media/images/uploads/company_uploads/<?php echo $upload_data['file_name'];?>" id="jcrop_target"/>
</div>
<div id="uploaded_preview">
<img src="<?php echo base_url();?>media/images/uploads/company_uploads/<?php echo $upload_data['file_name'];?>" id="preview"/>
</div>
<input type="hidden" name="x" id="x" />
<input type="hidden" name="y" id="y" />
<input type="hidden" name="x2" id="x2" />
<input type="hidden" name="y2" id="y2" />
<input type="text" name="w" id="w" />
<input type="text" name="h" id="h" />
<input type="hidden" name="image_name" value="<?php echo $upload_data['file_name'];?>"/>
<input type="submit" name="crop_image" value="Crop" />
</form>
<?php endif; ?>
<?php endif; ?>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您必须输入
maintain_ratio
而不是maintain_ration
。You must put
maintain_ratio
instead ofmaintain_ration
.如果您发布了 Codeigniter 抛出的错误消息,这将使我们能够提供更多帮助。
您是否使用 Codeigniter 的“表单助手”进行验证?如果在 jCrop 中正确设置了“maxSize”,那么您应该不会遇到任何问题...
错误请:)
If you posted the error message(s) that Codeigniter was throwing, it would allow us to be a lot more helpful.
Are you utilizing Codeigniter's 'Form helper' for validation? If 'maxSize' is set correctly in jCrop, you shouldn't be having any problems...
Errors please :)