手机端图片上传--支持图片裁剪

(一)css样式部分

    <style type="text/css">

     body,html,section {padding:0;margin:0;}

    .upload{  /*height: 200px;*/  position: relative; overflow: hidden; }

    .upload p{ text-align: center; color: #fff; font-size: 1.1em; margin:0;padding:0;}

    .upload .font{ position:absolute; bottom:20%;left:0; width:100%; text-align:center;}

    .upload .update{ position: absolute; z-index: 1px; top:20px;right:20px; display: inline-block; background: #000;opacity:0.75;padding: 3px 20px;border-radius: 15px;}

    .upload span {width:80px;display: inline-block;height: 80px; background: url(pic.png) no-repeat 0px 0px; background-size: 80px auto;color: #fff; position: absolute; left:50%; margin-left:-40px;margin-top:-40px;top: 36%;}

    .upload span input[type="file"]{width:80px;height:80px;position:absolute; left:0; top:0; opacity:0;filter: alpha(opacity=0);}

    .upload .update span{ background: none;width: 0px; height: 0px;}

    .upload img{ width: 100%;}

    .w_all_column .up_phone{ padding:10px; background: #fff;margin-top:0px;}

    /*==========图片截取的弹窗==========*/

    .htmleaf-container{ margin: 0 auto;   text-align: center;  overflow: hidden;width: 100%; height: 100%;position: fixed;

    top: 0;   background: #000;  display: none; z-index: 9999999;}

    .htmleaf-content {   font-size: 150%; padding: 1em 0;}

    .htmleaf-content h2 {   margin: 0 0 2em; opacity: 0.1;}

    .htmleaf-content p { margin: 1em 0; padding: 5em 0 0 0;  font-size: 0.65em;}

    #clipArea { height: 90%;}

    .foot-use{ background: #fff;  height: 40px; width: 100%;position: relative;}

    /*上传图标*/

    #file{    float: left;    height: 100%;}

    .clipBtn{  height: 100%; height: 45px;float:left;width: 50%; background: #f3f3f3; border: 0; outline: none; color: #333; font-size: 1em;    font-family: "微软雅黑";

     z-index: 999;}

    .clipBtn2{ background:#ff65af; color: #fff; height: 45px;}

    .uploader1 { position: fixed;bottom:0px;width: 100%;   cursor: default; }

    .filename {  position: absolute;outline: 0 none; line-height: 1.5rem; font-size: 1.5rem; color: #999; width: 100%;

     margin: 0; overflow: hidden; cursor: default; text-overflow: ellipsis;  white-space: nowrap; border: 0;  top: 9.2rem;

     text-align: center;}

    /*==========提交==========*/

    .tijiao_bnt{/*width:100%;position: fixed;left: 0;bottom: 0; */background:#ff65af; margin:1em 10px 0; border-radius:5px;}

.tijiao_bnt input{ display: block; width:100%; height: 45px;  line-height: 45px; background:none; text-align: center; color: #fff; font-family:"微软雅黑";  font-size:1em;border: 0;-webkit-appearance: none;}

    </style>

(二)html代码部分

<section id="form_block">

<form id="form">

<div class="upload">

<p><img src="bg_head.png"></p>

<p class="add_pic">

<span>

</span>

</p>

<p class="font add_pic">赶快上传个图呗</p>

<p class="update" style="display:none;">修改</p>

<input type="file" id="file" style="display:none;">

<input type="hidden" name="pic"/>

</div>

   <div class="tijiao_bnt"><input type="submit" value="提交" οnclick="changeSubmit();"></div>

</form>

</section>

    

<!--弹出的页面-->

<article class="htmleaf-container" style="display:none">

    <div id="clipArea"></div>

    <div class="foot-use">

<div class="uploader1 blue">

   <div id="file"></div>

</div>

<button class="clipBtn">取消</button>

<button class="clipBtn clipBtn2" id="clipBtn">确定</button>

    </div>

</article>

<!--/弹出的页面-->

(三)引入js库

<script type="text/javascript" src="./jquery.js"></script>

<script type="text/javascript" src="iscroll-zoom.js"></script>

<script type="text/javascript" src="hammer.js"></script>

<script type="text/javascript" src="jquery.photoClip.js"></script>

<script type="text/javascript" src="exif.js"></script>

<script type="text/javascript" src="MegaPixImage.js"></script>

(四)js代码部分

<script type="text/javascript">

/************传图*************/

$("#clipArea").photoClip({

    width: 521,

    height: 364,

    file: "#file",

    view: "#view",

    ok: "#clipBtn",

    strictSize : true,

    loadStart: function() {

//图片上传开始

console.log("照片读取中");

    },

    loadComplete: function() {

//图片上传完成

console.log("照片读取完成");

    },

    clipFinish: function(dataURL) { 

//图片上传完成时进行的回调函数

// console.log(dataURL);

$('.add_pic').hide();

$('.update').show();

$('.upload img').attr('src',dataURL);

$('input[name=pic]').val(dataURL);

    }

});    

//点击添加或修改时调用click事件

$('.add_pic,.update').click(function(){

     $('#file').click();

 });

//change事件

$('#file').change(function(){

    $('.htmleaf-container').show();

    // setImagePreview();

});

//裁剪图片页面的取消按键

$('.clipBtn').click(function(){

    $('.htmleaf-container').hide();

});

//jq阻止表单提交

$(document).ready(function(){

  $("form").submit(function(e){

    e.preventDefault();

    return false;

  });

});

//Ajax进行图片上传

function changeSubmit(){

    var data = serialize('#form');

    $('.tijiao_bnt input').val('提交中...');

    $.post(

'http://wx.58haha.cn/phone/1.php',

data,

function(res){

   mayclick = true;

   $('.tijiao_bnt input').val('提交');

   if (res.res) {

     window.location.href = res.msg;

   }else{

     showWarning(res.msg);

   }

},

'json'

    );

}

</script>

(五)PHP代码部分

<?php

//上传图片

$imageTools = \Yin::load_sys_class('Image');

if (strlen($_POST['pic'])>0) {

    $tmp = $this->up_img($_POST['pic']);

    //原图路径

    $terminalPath = Yin::load_config('system', 'upload_path').'pic_'.date('YmdHis').'_'.mt_rand(10000,99999).'.jpg';

    $imageTools->img2thumbByWidth($tmp,$terminalPath,521); //按照最大宽度进行等比缩放

    $water = '/statics/images/mark.png'; //默认的水印图片

    //加水印图路径

    $waterPath = str_replace('/pic_', '/water_', $terminalPath);

    $imageTools->watermark($terminalPath,$waterPath,"", $water); //添加水印

    $picPath = $imageTools->uploadByFilename($terminalPath); //往storage中上传一个文件

    $haswaterPath = $imageTools->uploadByFilename($waterPath);

    $data['pic'] = $haswaterPath['group_name'].'/'.$haswaterPath['filename'];

    $data['no_water_pic'] = $picPath['group_name'].'/'.$picPath['filename'];

    //缩略图

    $thumbPath = str_replace('/pic_', '/thumb_', $terminalPath);

    $imageTools->img2thumbByWidth($terminalPath,$thumbPath,120);

    $thethumbPath = $imageTools->uploadByFilename($thumbPath);

    $data['thumb'] = $thethumbPath['group_name'].'/'.$thethumbPath['filename'];

    unlink($terminalPath);

    unlink($waterPath);

    unlink($thumbPath);

}

//开始上传图片

function up_img($data){

    $img = $data;

    $img = str_replace('data:image/jpeg;base64,', '', $img);

    $img = str_replace(' ', '+', $img);

    $img = base64_decode($img);

    if(!$img) {

       return false;

    }else{

$fileName = date("YmdHis")."_".mt_rand(10000,99999).".jpg";

file_put_contents(UPLOAD_PATH.$fileName, $img);

return UPLOAD_PATH.$fileName;

    }

}

?>