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="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 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上传裁剪后的图片的更多相关文章

  1. vue代码上传服务器后背景图片404解决方法

    问题:代码上传服务器后,图片404,使用的font-awesome图标也是404 解决办法: 如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin ...

  2. Django使用cropbox包来上传裁剪图片

    1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...

  3. Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪

    在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...

  4. iOS 视频录制、压缩、上传

    项目中实现功能 视频的录制.压缩.上传 首先调用系统的相机或相册 iOS录制的视频是mov格式的,安卓和PC不支持,因此要转换成MP4,并且要压缩. 获取到视频或者照片,处理的方法 下面两个方法是获取 ...

  5. 项目分享五:H5图片压缩与上传

    一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...

  6. html5调用手机相机并压缩、上传

    近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差 ...

  7. 基于Jcrop的图片上传裁剪加预览

    最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...

  8. 图片上传裁剪zyupload

    图片上传控件用的是zyupload控件,使用过程中遇到了一些问题,特别记录下来 上图是目前的使用效果,这个控件我是用js代码动态添加出来的 HTML代码: <div class="wi ...

  9. mui开发app之多图压缩与上传(仿qq空间说说发表)

    欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...

随机推荐

  1. ceph rbd双挂载导致ext4文件系统inode链接数据污染

    转载自:https://my.oschina.net/xueyi28/blog/1596003 ###故障现象 /data/rbd1/dir1/a/file1 /data/rbd1/dir2/a/fi ...

  2. 外网访问内网MariaDB数据库

    外网访问本地MariaDB数据库 本地安装了MariaDB数据库,只能在局域网内访问,怎样从公网也能访问内网MariaDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Mar ...

  3. 什么是HTML DOM对象

    HTML DOM 对象 HTML DOM Document 对象 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 ...

  4. Android5.0新特性之——按钮点击效果动画(涟漪效果)

    Android5.0 Material Design设计的动画效果 RippleDrawable涟漪效果 涟漪效果是Android5.0以后的新特性.为了兼容性,建议新建drawable-v21文件夹 ...

  5. Bigger-Mai 养成计划,前端基础学习之HTML

    HTML 超文本标记语言(Hyper Text Markup Language) 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ...

  6. 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步操作 思路: ...

  7. windows中的软链接硬链接等

    学校嘛,有些时候还是得逆逆上网客户端啥的,并且学校的不少工作,这Windows的需求还是挺强的,之前Win10的体验并不是太好,不过时隔这么久,打算从7升级到10了,恰好系统也该换了. 首先是命令行的 ...

  8. 使用卷积神经网络CNN完成验证码识别

    gen_sample_by_captcha.py 生成验证码图片 # -*- coding: UTF-8 -*- """ 使用captcha lib生成验证码(前提:pi ...

  9. VBoxManage安装

    扩展包的版本需要与VirtualBox的版本一致,通过帮助可以查看VirtualBox的版本信息,然后在http://download.virtualbox.org/virtualbox/寻找对应的版 ...

  10. 前端学习之HTML

    HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5 ...