经过一番折磨终于搞出来了，经验分享给大家
下面的jscss在mui的案例代码里都有的，我就不上传了，要是没有的可以加我qq，1576245636
这是前台代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.poppicker.css" rel="stylesheet" />
<script type="text/javascript" src="../../js/exif.min.js"></script>
</head>
<style>
#picturedisplay{
text-align:center;
margin-top:10%;
}
#image{
width:60%;
height:400px;
}
</style>
<body>
<header class="mui-bar mui-bar-nav" id="headportrait">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:red;"></a>
<h1 class="mui-title">公司证书</h1>
<a class="mui-icon mui-icon-camera mui-pull-right" style="color:red;" id="useravatar"></a>
</header>
<div class="mui-content">
<div id="picturedisplay">
<img src="" id="image" />
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
var companyinfo = plus.storage.getItem('companyinfo');//企业会员简历
if(!companyinfo){
}else{
var company= JSON.parse(companyinfo);//从本地存储获取简历信息
var picone = document.getElementById("image");
if(!company.com_certificate){
picone.src='../../img/zanwu.gif';
}else{
picone.src='http://www.*******.cn/'+company.com_certificate;
}
}
var route='';//存储图片路径
var userinfo = plus.storage.getItem('userinfo'); //获取本地存储
var user = JSON.parse(userinfo);//转为json
if(!userinfo){
}else{
//时间戳转换
function timestampToTime(timestamp) {
var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate();
return Y+M+D;
}
//头像修改
mui("#headportrait").on("tap", "#useravatar", function(e) {
if(mui.os.plus){
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "上传证书复印件",
cancel: "取消",
buttons: a
}, function(b) {
switch (b.index) {
case 0:
break;
case 1:
getImage();
break;
case 2:
galleryImg();
break;
default:
break
}
})
}
}); // 拍照方式更换图片
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
console.log(s);
appendFile(s);
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/heads.jpg"
})
} // 选择相册方式更换图片
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("heads.jpg", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.copyTo(root, 'heads.jpg', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
appendFile(e);
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
},
function(e) {
console.log('copy image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.copyTo(root, 'heads.jpg', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
appendFile(path);
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
},
function(e) {
console.log('copy image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
// 图片压缩
var f1=null;
function appendFile(path){
var img = new Image();
img.src = path;
img.onload = function () {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w =300; //480 你想压缩到多大，改这里
h =400;
//生成canvas
var canvas = document.createElement('canvas');
canvas.height=400;
canvas.width=300;
var ctx = canvas.getContext('2d'); // // $(canvas).attr({width : w, height : h});
ctx.drawImage(that, 0, 0, w, h);
ctx.arc(70,70,35,0,Math.PI*2);
var base64 = canvas.toDataURL('image/jpeg', 2 ); //1最清晰，越低越模糊。有一点不清楚这里明明设置的是jpeg。弹出 base64 开头的一段 data：image/png;却是png。哎开心就好，开心就好
// alert(base64);
f1 =base64; // 把base64数据丢过去，上传要用。
var pic = document.getElementById("image");
pic.src=base64;// 传过来的图片路径在这里用。
upload();//这里丢到img 的 src 里面就能看到效果了
}
}
function upload(){
var wt=plus.nativeUI.showWaiting();
mui.post('http://www.jiukeyou.cn/robot/public/portal/resumeapp/enterprisecertificate',{
files1:f1,
u_id:user.id
},function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
if(data.code=200){
plus.nativeUI.closeWaiting();
mui.toast('上传成功');
}else{
mui.toast('网络出小差了');
}
},'json'
);
}
}
});
</script>
</body> </html>
这是后台代码
//更换头像
function changetheavatar(){
$s=cmf_get_root(); //获的服务器路劲
$route="/var/www/html/".$s;
$time =time();//获得当前时间戳
$id=$_POST['userid'];
$fileone=$_POST['avatar'];
$filetwo = substr($fileone,22);
$tmp = base64_decode($filetwo);
$position="/uploads/touxiang/".$time.".jpg";
$fp=$route.$position;
file_put_contents($fp,$tmp); //给图片文件写入数据
$file=Db::table('cmf_user')->where('id',$id)->field('avatar')->find();
if(!empty($file['avatar'])){
$file="/var/www/html".$file['avatar'];
if(file_exists($file)){
unlink($file);
}else{
$update=Db::table('cmf_user')->where('id',$id)->update(['avatar'=>'']);
}
}
$avatar=$s.$position;
$update=Db::table('cmf_user')->where('id',$id)->update(['avatar'=>$avatar]);
if(isset($update)){
$userinfo=Db::table('cmf_user')->where('id',$id)->find();
$array=array('code'=>200,'userinfo'=>$userinfo);
}else{
$array=array('code'=>404);
}
echo json_encode($array);
}
如果有社么不好的地方大神多多指教
2 个评论
要回复文章请先登录或注册
m***@outlook.com (作者)
Rudy001