photoclip 图片旋转_PhotoClip移动端、pc端上传头像裁剪
photoClip是一款支持移动设备触摸手势的图片裁剪jQuery插件。
一般引入
html部分
+
使用
'options' => ["enctype" => "multipart/form-data", 'id' => 'form']
]) ?>
= $form->field($model, 'image')->hiddenInput()->label(false); ?>
= Alert::widget() ?>
样式部分
.alert-danger .close {
margin-top: 0;
margin-left: 70%;
}
body {
margin: 0;
text-align: center;
}
#clipArea {
height: 300px;
font-size: 100px;
text-align: center;
vertical-align: middle;
}
#file,
#clipBtn {
margin: 20px;
}
#add {
font-size: 100px;
display: block;
width: 100px;
line-height: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -60%);
z-index: 100;
-webkit-transform: translate(-50%, -60%);
}
js部分
<?php $this->beginBlock('js-end');?>
$('body').attr('ontouchstart', '');
new PhotoClip('#clipArea', {
size: 260,
outputSize: 640,
// adaptive: ['60%', '80%'],
file: '#file',
// view: '#view',
ok: '#clipBtn',
loadStart: function () {
console.log('开始读取照片');
},
loadComplete: function () {
console.log('照片读取完成');
},
loadError: function (msg) {
alert(msg);
},
done: function (dataURL) {
if (!dataURL) {
return
}
// 将图片URL地址赋值给name="image"
$('#user-image').val(dataURL);
$('#form').submit();
},
fail: function (msg) {
alert(msg);
}
});
// 点击+号 上传文件
$('#add').click(function () {
$('#file').click();
});
<?php $this->endBlock();?>
控制器部分
// 修改头像
public function actionEditImage()
{
$model = User::findOne(Yii::$app->user->identity->id);
if ($model->load(Yii::$app->request->post())) {
$imageBase = Yii::$app->request->post("User");
// 匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $imageBase['image'], $result)) {
$type = $result[2];
$folder = '/image/';
$path = Yii::getAlias('@uploads') . $folder;
if (FileHelper::createDirectory($path) === true) {
$newFile = time() . '.' . $type;
$base64_decode = base64_decode(str_replace($result[1], '', $imageBase['image']));
// 保存头像
if (file_put_contents($path . $newFile, $base64_decode)) {
// 删除旧的头像
if ($model->image) {
$old = Yii::getAlias('@uploads') . $model->image;
if (file_exists($old)) {
unlink($old);
}
}
$model->image= $folder . $newFile;
$model->save();
return $this->redirect(['/site']);
} else {
Yii::$app->session->setFlash('error', '上传头像失败!');
return $this->redirect(['edit-portrait']);
}
}
} else {
Yii::$app->session->setFlash('error', '上传头像失败!');
return $this->redirect(['edit-portrait']);
}
} else {
return $this->render('edit-image', [
'model' => $model
]);
}
}
photoclip 图片旋转_PhotoClip移动端、pc端上传头像裁剪相关推荐
- axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
- asp.net+js+ajax实现手机移动端页面预览、剪裁、上传头像图片
参考资料:支持移动设备触摸图片裁剪的jQuery插件 移动端html <!DOCTYPE html> <html> <head><meta http-equi ...
- UC电脑端PC端浏览器下载,UC浏览器凉了?
近期从UC浏览器的官网找不到UC浏览器的PC端没有了 而官网只有安卓端和iOS版本了 阿里官方的客服也回复说暂时不考虑开发UC浏览器电脑端了 百度贴吧也有感觉很可惜的感觉 而今天给大家带来的就是UC浏 ...
- 多终端登录,只保留一个移动端+PC端同时在线
大家好,我是入错行的bug猫.(http://blog.csdn.net/qq_41399429,谢绝转载) 今天突然有小伙伴在群里问bug猫,多终端登录怎么搞. bug猫说,不知道百度的程序猿不是好 ...
- vue 移动端头像裁剪_移动端 上传头像 并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...
- 移动端网页录音上传,服务端智能语音识别
移动端网页录音上传,服务端智能语音识别 最近,看了创业时代的魔镜,想法突如起来,能不能手机发送一条语音,语音上传到后台,自动识别语音的信息,转化为文字,将文字分析,然后回复用户艳学网的资源. 我们的资 ...
- 高仿微信上传头像附带压缩,旋转图片,附加demo
本人初学者,再做项目时要求上传头像要像微信那种,需要外面裁剪框不动,里面图片可以改变大小,android系统裁剪和所要求的完全相反,所以,对于这个问题,困扰了我将近一个月,不断的修改,不断的出现新问题 ...
- 1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端 先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片 对图片的裁剪以及调整(旋转.缩放 ...
- vue+element实现图片上传及裁剪功能(vue-cropper)
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
最新文章
- SQL Server根据访问历史日志分析提供优化
- QML基础类型之int
- Python每日一练(1):计算文件夹内各个文章中出现次数最多的单词
- 从浏览器端JavaScript代码进行服务器端日志记录
- 合约 cd 模式_CD的完整形式是什么?
- 资源 | Alibaba Cluster Data 开放下载:270 GB 数据揭秘你不知道的阿里巴巴数据中心...
- html表单验证用正则表达式,JavaScript 使用正则表达式进行表单验证的示例代码
- ML、DL、CNN学习记录7
- iscsi:IO操作流程(一)
- 茶余饭后聊Spring 一
- backports移植rtlwifi驱动
- 6.1-数据结构算法-堆栈与队列
- 机器学习算法篇:谈Softmax激活函数以及Softmax回归和Logistic回归关系
- Quartz配置文件quartz.properties加载
- CCNA考试题库中英文翻译版及答案1
- numpy_linspace函数
- C库函数——fabs()
- 一首好听的英文歌lemon tree(柠檬树)的中文歌词
- 始终从最不易改变的方面开始
- COW(寒假每日一题 19)