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张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...
随机推荐
- jqGrid实现表头自动换行
当jqGrid表头内容过多无法全部展示时,添加以下css实现表头自动换行. <style type="text/css"> /* jqgrid 表头自动换行 */ th ...
- PLS-00357: Table,View Or Sequence reference 'SEQ_TRADE_RECODE.NEXTVAL' not allowed in this context
oracle数据库: 为了使ID自增,建了序列后,创建触发器: create or replace TRIGGER TRIG_INSERT_TRADE_RECODE BEFORE INSERT ON ...
- 用keytool制作证书并在tomcat配置https服务(一)
https分为单项认证和双向认证. 一般https页面上的访问都是单项认证,服务端发送数字证书给客户端,客户单方面验证.而服务端不做验证. 而双向认证,需要双方都有证书,然后发送给对方进行验证.一般用 ...
- 物理层PHY 和 网络层MAC
PHY模块简介 物理层位于OSI最底层,物理层协议定义电气信号.线的状态.时钟要求.数据编码和数据传输用的连接器. 物理层的器件称为PHY. 上图里的灰色方框图里的就是PHY芯片内部模块图. MAC器 ...
- Docker 简单部署 ElasticSearch
https://www.cnblogs.com/jianxuanbing/p/9410800.html
- Python3 tkinter基础 Scrollbar pack 创建靠右、充满Y轴的垂直滚动条
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 提供HTML5播放RTSP流 提供微信播放RTSP流 HTML5支持rtsp web播放rtsp,微信支持rtsp
首先H5的video不支持RTSP播放,以下是html5的video官方介绍 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(O ...
- 蚂蚁金服ATEC城市峰会上海举行,三大发布迎接金融科技2019
2019年1月4日,蚂蚁金服ATEC城市峰会以“数字金融新原力(The New Force of Digital Finance)”为主题在上海举办.稠州银行副行长程杰.蚂蚁金服副总裁刘伟光.蚂蚁金服 ...
- loadrunner 参数化-如何从数据库中取数据-连接数据库进行参数化
LoadRunner提供两种参数化取值方式,一种是手动编辑,另一种就是通过连接数据库取值.一般在大型业务并发压力测试时,数据量肯定也都是非常大的,所以手动去编辑就不切实际了,这时用连接数据库的功能就方 ...
- python高阶函数(Map、Reduce、Filter、lamba)
Map函数 map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 代码如下: >>> def f(x): . ...