php ajax jcrop 裁剪图片,并预览
</div>
<div id="setCutPic" class="form-group" style="display:none">
<label class="col-sm-1 control-label control-label-alignr"
style="padding-right:15px;width:auto">剪图设置</label>
<div class="col-sm-1 mr20">
<input type="text" class="form-control" id="target_w" name="target_w" value=""/>
</div>
<label class="mr20 china-center"><code> X </code></label>
<div class="col-sm-1 mr20">
<input type="text" class="form-control" id="target_h" name="target_h" value=""/>
</div>
<label class="mr20 china-center"><code> (宽X高) </code></label>
<div class="col-sm-1 mr20">
<input type="button" id="ar_lock" class="btn btn-info-alt" value="设置裁区"/>
</div>
<div class="col-sm-1">
<input type="button" name="btn" class="btn btn-info-alt" value="裁剪"/>
</div>
<label class="china-center col-sm-8" style="margin-left: 90px"><code>若不设置图片宽高<b style="color: #46b8da;">裁剪后</b>默认尺寸为:<i id="default_size"></i></code></label>
<!-- 其他裁剪位置参数-->
<input type="text" type="hidden" id="x" name="x"/>
<input type="text" type="hidden" id="y" name="y"/>
<input type="text" type="hidden" id="x2" name="x2"/>
<input type="text" type="hidden" id="y2" name="y2"/>
</div>
<div id="preview-div" class="form-group" style="display:none">
<label class="col-sm-1 control-label control-label-alignr"
style="padding-right:15px;width:auto">预览图片</label>
<div id="target_box" class="col-sm-1 mr20">
<canvas id="can" ></canvas>
</div>
</div>
<input type="hidden" id="uploadId" value="">
以下是php
public function save_stream_to_image_fine(){
$result = $data = array();
$data = $_POST['img'];
if($data){
$data = urldecode($data);
if(strstr($data,",")){
$data = explode(',',$data);
$data = $data[1];
}
//echo $data;
$data=base64_decode($data);
}
if($data){
$tmp_name = rand(0,1000000099).".jpg";
file_put_contents($tmp_name,$data);
$result['msg'] = '上传图片成功';
$result['code'] = 200;
$result['url'] = $tmp_name;
}
echo json_encode($result);
}
Jcrop jquery bootstrap 需要自己下载