上传后如何为图像进行裁剪？ [英] How Do I Make A Croping For A Image After Uploading?
问题描述
这里我尝试过图像裁剪。裁剪效果仅适用于静态图像，但上传后不适用于图像。完成上传图像后，会抛出错误信息jcrop未定义。请帮助我。
以下是我的ctp文件
< pre lang =PHP> echo $ this-& gt; Html-& gt; script（array（'ckeditor / ckeditor'，'common'））;
// echo $ this-& gt; Html-& gt; css（ array（'jquery.validate'））;
echo $ this-& gt; Html-& gt; script（array（'jquery.min.1.8.3'，'jquery.validate '，'jquery.validation.functions'））;< / pre>
< script src =<？php echo HTTP_ROOT;？> js /backend/jquery.Jcrop.js\"></script>
< section id = 主要内容 >
< section class = 包装 >
< div class = row >
< div class = col-lg-12 >
< section class = panel > <？ php echo $ this-> Session-> flash（）; ？>
< div class = panel-body >
< div class = form > <？ php echo $ this-> Form-> create（' 配方'，数组（' enctype' => ' multipart / form-data'，' class' => ' '））; ？>
<！ - 标签导航 - >
< div style = clear：both; > < / div >
< br clear = all / >
< section 类 = panel id = error_msg >
< header class = panel-heading tab -bg-dark-navy-blue >
< ul class = nav nav-tabs >
< li class = > < a data-toggle = 标签 href = #upload > 上传< / a > < / li >
< / ul >
< / header < span class =code-keyword>>
< div class = panel-body >
< < span class =code-leadattribute> div class = 标签内容 >
< div id = upload class = tab-pane >
< div 样式 = float：left; width：50％ >
< div style = clear：both; > < / div >
< br / >
< div class = form-group >
< label = recipeimage class = control-label c ol-lg-2 > 上传食谱图像< span class = manedetory > * < / span > < / label >
< div class = col-lg-10 style = width：83％; > <？ php echo $ this-> Form-> input（' Recipe。 image'，array（' type' => ' file'，' label' => false，' id' => ' recipeimge'，' required' => false，' style' => ' border：none; width：100％; border-radius：4px; height：34px;'， ' onchange' => ' displayPreview（this.files，recipeimge）'））; ？> < span style = color：red; > ＃jpg，jpeg，png，gif，bmp格式 < / span >
<！ - < img src =<？php echo HTTP_ROOT;？> img / sago .jpgid =targetalt =[Jcrop示例]/> - >
< span class =code-keyword>< / div >
<？ php if （isset（$ getRecipe [' 食谱'] [' image']））{？>
< img src = <？php echo HTTP_ROOT。 RECIPE_IMAGE_THUMB。 thumb _ 。 $ getRecipe ['Recipe'] ['image']; ？ > />
<？ php} ？>
< / div >
< / div >
< div style = <跨度class =code-keyword> float：right; margin-removed 10px;保证金已删除146px; margin-removed -229px; width：50％; >
< div id = show_selected_image > < / div >
< / div >
<！ - < img src =<？php echo HTTP_ROOT; ？> img / sago.jpgid =targetalt =[Jcrop示例]/> - >
< / div >
< / div >
< / div >
< / section >
<！ - 标签导航结束 - >
< br clear = all / >
< div class = next_btn_st >
<？ php
echo $ this-> Form- > create（' cropimage'，array（' enctype' => ' multipart / form-data'，' onSubmit' => ' return checkCoords（）;'））;
echo $ this-> Form-> input（' < span class =code-string> x'，array（' type' = > ' text'，' < span class =code-string> id' => ' x'） ）;
echo $ this-> Form-> input（' y'，array（' type' => ' text'，' id' => ' y'））;
echo $ this-> Form-> input（' w'，数组（' type' => ' text'，' id' => ' w'））;
echo $ this-> Form-> input（' h'，array（' type' => ' text'，' id' => ' h'））;
echo $ this-> Form-> submit（' '，数组（' class' => ' next_btn'））;
？>
< / div >
< div style = clear：both; > < / div >
< / form >
< / div >
< / div >
< / section >
< / div >
< / div >
< / section >
< / section >
<！ - 主要内容结束 - >
## common.js文件中的
function onFileLoad（e）{
$（'＃show_selected_image'）。html（'< img id =recipeimge1style =width：702px; height：auto; border：1px solid #ccc;id =targetsrc ='+ e。 target.result +'/>'）;
//$('#recipeimge1').attr(\"src，e.target.result）;
}
函数displayPreview（files，id）{
// alert（id）;
var value = $（'＃'+ id）.val（）;
var ext = value.substring（value.lastIndexOf（'。'）+ 1）;
var ext = ext.toLowerCase（）;
var extList = new Array;
extList = [png，gif， ttf，jpg，jpeg，bmp];
if（$ .inArray（ext，extList） ）< 0）{
$（'＃'+ id）.val（''）;
alert（输入文件格式无效！请仅上传IMAGE文件）;
返回false;
}
else
{
var reader = new FileReader（）;
reader.onload = onFileLoad;
reader.readAsDataURL（files [0]）;
$（'＃recipeimge1' ）.Jcrop（{
aspectRatio：1，
setSelect：[50,290,350,10]，
addClass：'jcrop_custom' ，
bgColor：'black'，
bgOpacity：.5，
sideHandles：false，
onChange： updateCoordsf
}）;
返回true;
}
}
函数updateCoordsf（c）
{
$（'＃x'）。val（cx）;
$（'＃y'）。val（cy）;
$（'＃w'）。 val（cw）;
$（'＃h'）。val（ch）;
};
this-& gt; Html-& gt; script（array（'ckeditor / ckeditor'，'common'））;
// echo
this-& gt; Html-& gt; css（array（'jquery.validate'））;
echo
this-& gt; Html-& gt; script（array（'jquery.min.1.8.3'，'jquery.validate'，'jquery.validation。函数'））;< / pre>
< script src =<？php echo HTTP_ROOT;？> js / backend / jquery.Jcrop。 js>< / script>
< < span class =code-leadattribute> section id = 主要内容 >
< 部分 class = < span class =code-keyword> wrapper >
< div class = row >
< div class = col-lg-12 >
< 部分 class = panel > <？ php 回波
Here i have tried for image croping.The croping effect is only coming for static image but not for image after uploading.After doing for uploded image.it throws an error message jcrop is not define.Please help me.
Below is my ctp file
<pre lang="PHP">echo $this->Html->script(array('ckeditor/ckeditor','common'));
//echo $this->Html->css(array('jquery.validate'));
echo $this->Html->script(array('jquery.min.1.8.3', 'jquery.validate', 'jquery.validation.functions'));</pre>
<script src="<?php echo HTTP_ROOT;?>js/backend/jquery.Jcrop.js"></script>
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<section class="panel"> <?php echo $this->Session->flash(); ?>
<div class="panel-body">
<div class="form"> <?php echo $this->Form->create('Recipe', array('enctype' => 'multipart/form-data', 'class' => '')); ?>
<!--tab nav start-->
<div style="clear:both;"></div>
<br clear="all"/>
<section class="panel" id="error_msg">
<header class="panel-heading tab-bg-dark-navy-blue ">
<ul class="nav nav-tabs">
<li class=""> <a data-toggle="tab" href="#upload">Upload</a> </li>
</ul>
</header>
<div class="panel-body">
<div class="tab-content">
<div id="upload" class="tab-pane">
<div style="float:left;width:50%">
<div style="clear:both;"></div>
<br/>
<div class="form-group ">
<label for="recipeimage" class="control-label col-lg-2">Upload Recipe Image<span class="manedetory">*</span></label>
<div class="col-lg-10" style="width:83%;"> <?php echo $this->Form->input('Recipe.image', array('type' => 'file', 'label' => false, 'id' => 'recipeimge', 'required' => false, 'style' => 'border:none;width:100%;border-radius: 4px;height:34px;', 'onchange' => 'displayPreview(this.files,"recipeimge")')); ?> <span style="color:red;"># jpg,jpeg,png,gif,bmp format only</span>
<!-- <img src="<?php echo HTTP_ROOT;?>img/sago.jpg" id="target" alt="[Jcrop Example]" />-->
</div>
<?php if (isset($getRecipe['Recipe']['image'])) { ?>
<img src="<?php echo HTTP_ROOT . RECIPE_IMAGE_THUMB . "thumb_" . $getRecipe['Recipe']['image']; ?>"/>
<?php } ?>
</div>
</div>
<div style="float: right;margin-removed 10px; margin-removed 146px; margin-removed -229px;width: 50%;">
<div id="show_selected_image"> </div>
</div>
<!-- <img src="<?php echo HTTP_ROOT;?>img/sago.jpg" id="target" alt="[Jcrop Example]" />-->
</div>
</div>
</div>
</section>
<!--tab nav end-->
<br clear="all" />
<div class="next_btn_st">
<?php
echo $this->Form->create('cropimage', array('enctype' => 'multipart/form-data', 'onSubmit' => 'return checkCoords();'));
echo $this->Form->input('x', array('type' => 'text', 'id' => 'x'));
echo $this->Form->input('y', array('type' => 'text', 'id' => 'y'));
echo $this->Form->input('w', array('type' => 'text', 'id' => 'w'));
echo $this->Form->input('h', array('type' => 'text', 'id' => 'h'));
echo $this->Form->submit('', array('class' => 'next_btn'));
?>
</div>
<div style="clear:both;"></div>
</form>
</div>
</div>
</section>
</div>
</div>
</section>
</section>
<!--main content end-->
in##common.js file
function onFileLoad(e) {
$('#show_selected_image').html('<img id="recipeimge1" style="width:702px;height:auto;border: 1px solid #ccc;"id="target" src="'+e.target.result +'"/>');
//$('#recipeimge1').attr("src", e.target.result);
}
function displayPreview(files,id) {
//alert(id);
var value = $('#' + id).val();
var ext = value.substring(value.lastIndexOf('.') + 1);
var ext = ext.toLowerCase();
var extList = new Array;
extList = ["png", "gif", "ttf", "jpg", "jpeg", "bmp"];
if ($.inArray(ext, extList) < 0) {
$('#' + id).val('');
alert("Invalid input file format! Please upload only IMAGE file");
return false;
}
else
{
var reader = new FileReader();
reader.onload = onFileLoad;
reader.readAsDataURL(files[0]);
$('#recipeimge1').Jcrop({
aspectRatio: 1,
setSelect: [ 50, 290, 350, 10 ],
addClass: 'jcrop_custom',
bgColor: 'black',
bgOpacity: .5,
sideHandles: false,
onChange: updateCoordsf
});
return true;
}
}
function updateCoordsf(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
this->Html->script(array('ckeditor/ckeditor','common'));
//echo
this->Html->css(array('jquery.validate'));
echo
this->Html->script(array('jquery.min.1.8.3', 'jquery.validate', 'jquery.validation.functions'));</pre>
<script src="<?php echo HTTP_ROOT;?>js/backend/jquery.Jcrop.js"></script>
<section id="main-content"> <section class="wrapper"> <div class="row"> <div class="col-lg-12"> <section class="panel"> <?php echo
这篇关于上传后如何为图像进行裁剪？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
