thinkphp3.2+cropper上传多张图片剪切图片
实现效果截图
点加号可以继续上传第二张图片
代码部<--引入cropper相关文件-->
<link rel="stylesheet" href="/home/style/cropper.css" /><link href="/home/tupian/css/bootstrap.min.css" rel="stylesheet"><link href="/home/tupian/css/cropper.min.css" rel="stylesheet"><link href="/home/tupian/css/main.css" rel="stylesheet"><script src="/home/tupian/js/jquery.min.js"></script><script src="/home/tupian/js/bootstrap.min.js"></script><script src="/home/tupian/js/cropper.min.js"></script><script src="/home/tupian/js/main.js"></script><script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script><div class="form-group"><label class="col-sm-3 control-label">照片:</label><div class="col-sm-9"><div class="a-up"> <--是第二张图片加号的效果--><input type="file" οnchange="onChangeFn(this); "name="image[]" accept="image/jpeg,image/png" required /></div><div class="error">*请添加图片</div></div></div><--模态框--><div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><div class="modal-header"><h5 class="modal-title" id="modalLabel">剪裁图片</h5></div><div class="modal-body"><div class="img-container"><img id="image" style="max-width:100%;max-height:350px;"><--这里的最大高度一定要设置--></div></div><div class="modal-footer"><button type="button" class="btn btn-primary" id="crop">Crop</button></div></div></div> </div> function onChangeFn (obj) {var _this=$(obj),_upload=_this.parent();currentUpload=_upload;// <img src="data:images/erweima.png" class="upload-img">//截取开始var files = obj.files;var done = function (url) {image.src = url;$modal.modal('show');};var reader;var file;var url;if (files && files.length > 0) {file = files[0];if (URL) {done(URL.createObjectURL(file));} else if (FileReader) {reader = new FileReader();reader.onload = function (e) {done(reader.result);};reader.readAsDataURL(file);}}}var image = document.getElementById('image');var $modal = $('#modal');var currentUpload;var cropper;$modal.on('shown.bs.modal', function () {cropper = new Cropper(image, {aspectRatio: 16/9,zoomable:true,zoomOnWheel:true,viewMode: 0,});}).on('hidden.bs.modal', function () {cropper.destroy();cropper = null;});document.getElementById('crop').addEventListener('click', function () {var canvas;$modal.modal('hide');if (cropper) {canvas = cropper.getCroppedCanvas({width: 800,height: 500,}); // avatar.src = canvas.toDataURL(); <--读取图片-->var reader = new FileReader();reader.onload = function(evt) {currentUpload.before('<div class="divimg"><img src="' + evt.target.result + '" class="upload-img"><input type="hidden" value="' + evt.target.result + '" name="picc[]"><button type="button" class="close" οnclick="closeFun(this,1);"></button></div>');}canvas.toBlob(function (result) {reader.readAsDataURL(result);},"image/jpeg"); // console.log(canvas);if (currentUpload.next().css('display')=='block') {currentUpload.next().css('display','none')}var strHtml='<div class="a-up"><input type="file" οnchange="onChangeFn(this);" name="image[]" accept="image/jpeg,image/png" id="pic" /></div>';currentUpload.after(strHtml);currentUpload.hide();}});
后台部分:
<--接收过来的是base64的图片,速度较慢,应该是转成blob图片再传给后台,还没做>$base64_image_content = $_POST["picc"];foreach($base64_image_content as $k=>$v){$imageName = date("His",time())."_".rand(1111,9999).'.png';$dir = date('Ymd');$path = 'uploads/'.$dir;if (!is_dir($path)){ //判断目录是否存在 不存在就创建mkdir($path,0777,true);}if (strstr($v,",")){$base64_image_contents = explode(',',$v);$base64_image = $base64_image_contents[1];$root = $_SERVER['DOCUMENT_ROOT']."/".$path."/". $imageName;$r = file_put_contents($root, base64_decode($base64_image));//返回的是字节数 }$image[] = '/'.$path.'/'. $imageName;}foreach ($image as $kk=>$vv) {$images[] = json_encode($vv, true);}$data["image"] = '['.implode(',',$images).']';
//将base64格式图片转换为文件形式 function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type:mime});}
转载于:https://www.cnblogs.com/wangziyue/p/9103521.html
thinkphp3.2+cropper上传多张图片剪切图片相关推荐
- php用jquery-ajax上传多张图片限制图片大小
php用jquery-ajax上传多张图片限制图片大小 /*** 上传图片,默认大小限制为3M* @param String $fileInputName* @param number $size*/ ...
- vue+element上传多张图片和图片展示
前端: 文件上传使用el-upload <el-upload:http-request="uploadProductPic"accept="image/*" ...
- 高手教你PHP上传多张图片
高手教你PHP上传多张图片 对于我们来说上传一张图片是非常简单的事情,这里教大家一个关于PHP上传多张图片的代码分析,希望对大家有帮助. 学习PHP时,你可能会遇到PHP上传多张图片问题,这里将介绍P ...
- ajax请求多张图片数据库,ajax上传多文件,一次上传多张图片
ajax上传多文件,一次上传多张图片 作者:PHPYuan 时间:2018-11-04 03:41:44 使用ajax上传文件,指望这个对象:let fd = new FormData(); html ...
- php上传多张图片为什么只显示一张,javascript,_js多张图片上传 也拿到多张图片的路径 在页面上展示只显示一张?只执行了一次???,javascript - phpStudy...
js多张图片上传 也拿到多张图片的路径 在页面上展示只显示一张?只执行了一次??? js多张图片上传 也拿到多张图片的路径 在页面上展示只显示一张?只执行了一次??? self.$els.upload ...
- 如何在IPFS里面上传一张图片
之前有好几人问过小编,想在IPFS里面上传一张图片.如何做? 今天小编就讲一下如何在IPFS里面上传.下载文件? 1 下载IPFS软件 下载地址:https://dist.ipfs.io/#go-ip ...
- okhttp上传图片和其他参数_Android中Okhttp3实现上传多张图片同时传递参数_放手_前端开发者...
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...
- php 点击选择图片上传,php上传多张图片时,选择图片后即可预览的问题
这几天一直在解决一个问题,上传图片时选择成功后就能预览. 需求:在点击上传图标的时候会在前面的input框中显示出文件名,然后点击后面的查看按钮就可以预览选择的这张图片了,要求不能刷新页面 1.一开始 ...
- [前台]---js重复上传一张图片两次,第二次失败的解决办法和思路
js重复上传一张图片两次,第二次会失败,解决办法就是修改input的value值. 先上代码: <input style="display:none" type=" ...
最新文章
- 改善C#程序的建议5:引用类型赋值为null与加速垃圾回收
- ML 05、分类、标注与回归
- supervisor python_使用supervisor运行python脚本
- 韩信走马分油(C语言)
- 设置访问权限_【新思考教学者思】李世松:不要对经典设置访问权限
- Vmware 中Linux中NAT网络异常解决方法
- SDP(12): MongoDB-Engine - Streaming
- JS五种运算符,运算符的优先级
- 内核并发控制---读写自旋锁 (来自网易)
- html5中点击后不发生变化_魔道祖师中资深粉一看就明白的梗,路人见到后都反应不过来...
- 发展大数据还有啥问题:数据孤岛、技术差距、人才短缺
- Java字符串contains()
- set python_set在python里的含义和用法
- java svn插件_eclipse 安装SVN插件 subversive
- Excel快速排查重复数据的几种方法?
- css transtion不生效_CSS3 Transition属性使用详解
- 继续魔改TCP BBR
- 电磁元件(电阻,电容与电感)
- 经验总结-显示驱动常见的通用问题
- 流行QQ在线客服代码
热门文章
- python实现的遗传算法实例(一)
- 从输入 URL 到页面加载完的过程中都发生了什么事情?
- Java成神之路——CountDownLatch、CyclicBarrier
- linux wc read,Linux 下使用 wc 统计文件夹下所有文件的代码行数(包括子目录)-Go语言中文社区...
- 运行gclient一直没反应_IC厌氧反应器的调试-温度影响
- activitimq集群搭建_Spring-activiti
- 答网友问:一个abs函数引发的问题
- gcc及doxygen的安装过程
- linux下串口程序测试
- oracle:时间数据的处理