cropper截图不压缩PHP上传裁剪后的图片
cropperjs使用不多说网上都有很详细的介绍如下面:
https://blog.csdn.net/lxy4239/article/details/78920979
主要讲下使用的经历


裁剪后图片不失真效果显示
直接上代码:
链接:https://pan.baidu.com/s/1W1liylZzUwKNSt0CBIravw 密码:fypq
等比裁剪:
<div class="btn-group btn-group-crop" id="cutout">
<button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ "maxWidth": 4096, "maxHeight": 4096 }">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false">
裁剪
</span>
</button>
</div>
var options = {
aspectRatio: 0, //裁剪框比例
preview: '.img-preview',
crop: function (e) {
$dataX.val(Math.round(e.x));
$dataY.val(Math.round(e.y));
$dataHeight.val(Math.round(e.height));
$dataWidth.val(Math.round(e.width));
$dataRotate.val(e.rotate);
$dataScaleX.val(e.scaleX);
$dataScaleY.val(e.scaleY);
}
};
var originalImageURL = $image.attr('src');
var uploadedImageURL;
提交保存后台:
$.post('./upload.php',data,function(ret){
var obj = eval("(" + ret + ")");
if(obj.res=='true'){
$('.cropper-container').css('display', 'none');
$('#image_orc').css('display', 'block');
$('#image_orc').attr('src','image/'+obj.src);
$('#image_orc').css('border','1px solid #ddd'); }else{
alert('上传失败');
}
},'text');
<?php
error_reporting(0);//禁用错误报告
if (IS_POST) {
header('Content-type:text/html;charset=utf-8');
$base64_image_content = $_POST['imgBase'];
//将base64编码转换为图片保存
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
$type = $result[2];
$new_file = "image/";
if (!file_exists($new_file)) {
//检查是否有该文件夹,如果没有就创建,并给予最高权限
mkdir($new_file, 0700);
}
$img='field' . ".{$type}";
$new_file = $new_file . $img;
//将图片保存到指定的位置
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
echo json_encode(array('res' => 'true','src' => $img));
}else{
echo json_encode(array('res' => 'false'));
}
}else{
echo 'false';
} } ?>
具体不懂的地方,细节问题可以加群讨论
cropper截图不压缩PHP上传裁剪后的图片的更多相关文章
- vue代码上传服务器后背景图片404解决方法
问题:代码上传服务器后,图片404,使用的font-awesome图标也是404 解决办法: 如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin ...
- Django使用cropbox包来上传裁剪图片
1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...
- Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...
- iOS 视频录制、压缩、上传
项目中实现功能 视频的录制.压缩.上传 首先调用系统的相机或相册 iOS录制的视频是mov格式的,安卓和PC不支持,因此要转换成MP4,并且要压缩. 获取到视频或者照片,处理的方法 下面两个方法是获取 ...
- 项目分享五:H5图片压缩与上传
一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...
- html5调用手机相机并压缩、上传
近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差 ...
- 基于Jcrop的图片上传裁剪加预览
最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...
- 图片上传裁剪zyupload
图片上传控件用的是zyupload控件,使用过程中遇到了一些问题,特别记录下来 上图是目前的使用效果,这个控件我是用js代码动态添加出来的 HTML代码: <div class="wi ...
- mui开发app之多图压缩与上传(仿qq空间说说发表)
欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...
随机推荐
- ceph rbd双挂载导致ext4文件系统inode链接数据污染
转载自:https://my.oschina.net/xueyi28/blog/1596003 ###故障现象 /data/rbd1/dir1/a/file1 /data/rbd1/dir2/a/fi ...
- 外网访问内网MariaDB数据库
外网访问本地MariaDB数据库 本地安装了MariaDB数据库,只能在局域网内访问,怎样从公网也能访问内网MariaDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Mar ...
- 什么是HTML DOM对象
HTML DOM 对象 HTML DOM Document 对象 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 ...
- Android5.0新特性之——按钮点击效果动画(涟漪效果)
Android5.0 Material Design设计的动画效果 RippleDrawable涟漪效果 涟漪效果是Android5.0以后的新特性.为了兼容性,建议新建drawable-v21文件夹 ...
- Bigger-Mai 养成计划,前端基础学习之HTML
HTML 超文本标记语言(Hyper Text Markup Language) 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ...
- HDU 4348 To the moon(主席树 区间更新)题解
题意: 给一个数组A[1] ~ A[n],有4种操作: Q l r询问l r区间和 C l r v给l r区间每个数加v H l r t询问第t步操作的时候l r区间和 B t返回到第t步操作 思路: ...
- windows中的软链接硬链接等
学校嘛,有些时候还是得逆逆上网客户端啥的,并且学校的不少工作,这Windows的需求还是挺强的,之前Win10的体验并不是太好,不过时隔这么久,打算从7升级到10了,恰好系统也该换了. 首先是命令行的 ...
- 使用卷积神经网络CNN完成验证码识别
gen_sample_by_captcha.py 生成验证码图片 # -*- coding: UTF-8 -*- """ 使用captcha lib生成验证码(前提:pi ...
- VBoxManage安装
扩展包的版本需要与VirtualBox的版本一致,通过帮助可以查看VirtualBox的版本信息,然后在http://download.virtualbox.org/virtualbox/寻找对应的版 ...
- 前端学习之HTML
HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5 ...