phpcms会员flash上传修改头像图片不能使用更换为cropper.js h5头像上传

phpcms基于cropper.js的图片上传和裁剪

项目中要求图片上传并裁剪的功能，之前也有接触过很多图片裁剪插件，效果体验不是很好，今天推荐一款好用的插件-cropper，超级好用，裁剪功能丰富，满足了各种需求。

网上有很多的理由cropper.js开发的h5图片上传，但是大都依赖bootstrap，需要引入他们的东西，感觉太重。另外由于phpcms v9后台修改flash上传为h5上传，唯独没有修改头像的上传，感觉不太完美，所以专门开发了一下h5头像上传，

目前是对接sso的上传，对于已经去掉sso的用户，升级资料正在整理中。

效果图：

付费内容阅读

（1）下载压缩包：[$]h5头像上传.zip，并解压
（2）找到cropper.min.css和ImgCropping.css放到statics/css/文件夹下，找到cropper.min.js放到statics/js/文件夹下
（3）找到phpcms/modules/member/index.php找到代码388行左右：

$upurl = base64_encode($phpsso_api_url.'/index.php?m=phpsso&c=index&a=uploadavatar&auth_data='.$auth_data);

改成：

$upurl = $phpsso_api_url.'/index.php?m=phpsso&c=index&a=uploadavatar&auth_data='.$auth_data;

$uid = $this->memberinfo['phpssouid'];

（4）找到phpsso_server/phpcms/modules/phpsso/index.php找到

public function uploadavatar() { 

把上传头像的方法上面几行 改成代码：

//根据用户id创建文件夹

 if(isset($this->data['uid']) && isset($this->data['avatardata'])) { 

$this->uid = intval($this->data['uid']); 

$this->avatardata = $this->data['avatardata']; 

} else {

exit('0');

}

改成：

$this->data = $_POST; 

//根据用户id创建文件夹 

 if(isset($this->data['uid']) && isset($this->data['avatardata'])) { 

$this->uid = intval($this->data['uid']); 

$this->avatardata = str_replace('data:image/jpeg;base64,', '', $this->data['avatardata']); 

 $this->avatardata = base64_decode($this->avatardata); 

 } else { 

 exit('0'); 

}

（5）找到下载压缩包中的account_manage_avatar.html，如果你没有做过二开，直接去覆盖phpcms/templates/default/member/account_manage_avatar.html文件即可，具体修改代码为：（找到代码<div class=”content”>）

<script language="javascript" type="text/javascript" src="{$phpsso_api_url}/statics/js/swfobject.js"></script> 

<script type="text/javascript"> 

var flashvars = { 

'upurl':"{$upurl}&callback=return_avatar&" 

 };  

 var params = { 'align':'middle', 

 'play':'true', 

'loop':'false',

 'scale':'showall',

 'wmode':'window', 

 'devicefont':'true', 

 'id':'Main', 

 'bgcolor':'#ffffff', 

 'name':'Main', 'allowscriptaccess':'always' 

};  

var attributes = { 

 };  

 swfobject.embedSWF("{$phpsso_api_url}/statics/images/main.swf", "myContent", "490", "434", "9.0.0","{$phpsso_api_url}/statics/images/expressInstall.swf", flashvars, params, attributes); 

 function return_avatar(data) { 

 if(data == 1) { 

window.location.reload(); 

 } else { 

alert('failure'); 

 } 

 } 

</script>  

<ul class="col-right col-avatar" id="avatarlist"> 

 {loop $avatar $k $v} 

 <li> 

<img src="{$v}" height="{$k}" width="{$k}" onerror="this.src='{$phpsso_api_url}/statics/images/member/nophoto.gif'"><br /> 

 {L('avatar')}{$k} x {$k} 

</li> 

{/loop} 

</ul> 

<div class="col-auto"> 

<div id="myContent">  

<p>Alternative content</p>  

</div> 

</div> 

改成：

<link href="{CSS_PATH}table_form.css" rel="stylesheet" type="text/css" /> 

<link href="{CSS_PATH}cropper.min.css" rel="stylesheet" type="text/css" /> 

<link href="{CSS_PATH}ImgCropping.css" rel="stylesheet" type="text/css" /> 

<script language="javascript" type="text/javascript" src="{JS_PATH}cropper.min.js"></script> 

<div style="width: 320px;height: 320px;border: solid 1px #e2e2e2;padding: 5px;margin-top: 10px"> 

<!-- <img id="finalImg" src="" width="100%"> --> 

{loop $avatar $k $v} 

{if $k == 180} 

<img src="{$v}" alt="{$v}" id="finalImg" width="100%" onerror="this.src='{$phpsso_api_url}/statics/images/member/nophoto.gif'"> 

{/if} 

{/loop} 

</div> 

<button id="replaceImg" class="l-btn">点击上传图片</button>

另外在页面的最下边添加代码：（建议放到{template ‘member’, ‘footer’}前面）

<!--图片裁剪框 start--> 

<div style="display: none" class="tailoring-container"> 

<div class="black-cloth" onclick="closeTailor(this)"></div> 

<div class="tailoring-content"> 

<div class="tailoring-content-one"> 

<label title="上传图片" for="chooseImg" class="l-btn choose-btn"> 

<input type="file" accept="image/*" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)"> 

选择图片 

</label> 

<div class="close-tailoring" onclick="closeTailor(this)">×</div> 

</div> 

<div class="tailoring-content-two"> 

<div class="tailoring-box-parcel"> 

<!-- <img id="tailoringImg"> --> 

{if $avatar} 

{loop $avatar $k $v} 

{if $k == 180} 

<img src="{$v}" alt="{$v}" id="tailoringImg" width="100%"> 

{/if} 

{/loop} 

{/if} 

</div> 

<div class="preview-box-parcel"> 

<p>图片预览：</p> 

<!-- <div class="square previewImg"></div> --> 

<div class="previewImg-box"> 

<div class="circular previewImg slg"></div> 

<p>180*180</p> 

</div> 

<div class="previewImg-box"> 

<div class="circular previewImg lg"></div> 

<p>90*90</p> 

</div> 

<div class="previewImg-box"> 

<div class="circular previewImg md"></div> 

<p>45*45</p> 

</div> 

<div class="previewImg-box"> 

<div class="circular previewImg sm"></div> 

<p>30*30</p> 

</div> 

</div> 

</div> 

<div class="tailoring-content-three"> 

<button class="l-btn cropper-reset-btn">复位</button> 

<button class="l-btn cropper-rotate-btn">旋转</button> 

<button class="l-btn cropper-scaleX-btn">换向</button> 

<button class="l-btn sureCut" id="sureCut">保存修改</button> 

</div> 

</div> 

</div> 

<!--图片裁剪框 end--> 

<script> 

//弹出框水平垂直居中 

(window.onresize = function () { 

var win_height = $(window).height(); 

var win_width = $(window).width(); 

if (win_width <= 768){ 

$(".tailoring-content").css({ 

"top": (win_height - $(".tailoring-content").outerHeight())/2, 

"left": 0 

}); 

}else{ 

$(".tailoring-content").css({ 

"top": (win_height - $(".tailoring-content").outerHeight())/2, 

"left": (win_width - $(".tailoring-content").outerWidth())/2 

}); 

} 

})(); 

//弹出图片裁剪框 

$("#replaceImg,#finalImg").on("click",function () { 

$(".tailoring-container").toggle(); 

}); 

//图像上传 

function selectImg(file) { 

if (!file.files || !file.files[0]){ 

return; 

} 

var reader = new FileReader(); 

reader.onload = function (evt) { 

var replaceSrc = evt.target.result; 

//更换cropper的图片 

$('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真 

} 

reader.readAsDataURL(file.files[0]); 

} 

//cropper图片裁剪 

$('#tailoringImg').cropper({ 

aspectRatio: 1/1,//默认比例 

preview: '.previewImg',//预览视图 

guides: true, //裁剪框的虚线(九宫格) 

autoCropArea: 0.9, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8 

movable: false, //是否允许移动图片 

dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域 

movable: true, //是否允许移动剪裁框 

resizable: true, //是否允许改变裁剪框的大小 

zoomable: true, //是否允许缩放图片大小 

mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片 

touchDragZoom: true, //是否允许通过触摸移动来缩放图片 

rotatable: true, //是否允许旋转图片 

crop: function(e) { 

// 输出结果数据裁剪图像。 

} 

}); 

//旋转 

$(".cropper-rotate-btn").on("click",function () { 

$('#tailoringImg').cropper("rotate", 45); 

}); 

//复位 

$(".cropper-reset-btn").on("click",function () { 

$('#tailoringImg').cropper("reset"); 

}); 

//换向 

var flagX = true; 

$(".cropper-scaleX-btn").on("click",function () { 

if(flagX){ 

$('#tailoringImg').cropper("scaleX", -1); 

flagX = false; 

}else{ 

$('#tailoringImg').cropper("scaleX", 1); 

flagX = true; 

} 

flagX != flagX; 

}); 

//裁剪后的处理 

$("#sureCut").on("click",function () { 

if ($("#tailoringImg").attr("src") == null ){ 

return false; 

}else{ 

// $('#tailoringImg').cropper('setCanvasData',{width:620,height:400}); 

// $('#tailoringImg').cropper('setData',{width:620,height:400}); 

var cas = $('#tailoringImg').cropper('getCroppedCanvas', { 

width: 750, 

height: 750, 

});//获取被裁剪后的canvas 

//var base64url = cas.toDataURL('image/png'); //转换为base64地址形式 

var base64url = cas.toDataURL('image/jpeg', 0.8); 

$("#finalImg").prop("src",base64url);//显示为图片的形式 

//$("#idCardImage").val(base64url); 

imagesAjax(base64url); 

//关闭裁剪框 

closeTailor(); 

} 

}); 

//关闭裁剪框 

function closeTailor() { 

$(".tailoring-container").toggle(); 

} 

function imagesAjax(src) { 

var data = {}; 

data.avatardata = src; 

data.uid = "{$uid}"; 

$.ajax({ 

url: "{$upurl}", 

data: data, 

type: "POST", 

dataType: 'json', 

success: function(res) { 

console.log(res) 

} 

}); 

} 

</script>

[/$]