cropper.js组件，弹出图片裁剪窗口，支持图片缩放、移动、旋转，将裁剪后的图片以base64的格式传给后端。
支持Promise API
支持移动触摸事件
基于canvas技术，支持canvas的浏览器都可以使用该插件
通过Base64编码导出剪裁后的图片。 可以通过json数据来获取图片的位置和大小
可以通过json数据来设置图片的位置和大小
可以通过URL来获取图片。
外部引入
<script src="layui/layui/layui.js"></script> <link rel="stylesheet" type="text/css" href="layui/layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="cropper.css"> <script src="cropper.js"></script> <script src="croppers.js"></script>
HTML容器
<div class="layui-form-item"> <label class="layui-form-label">头像</label> <div class="layui-input-inline"> <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" class="layui-input"> </div> <div class="layui-input-inline"> <div class="layui-upload-list" style="margin:0" id="srcimgurl"></div> </div> <div class="layui-input-inline layui-btn-container"> <button class="layui-btn layui-btn-primary" id="editimg">选择图片</button> </div> <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div> </div>
layui组件调用
layui.use(['form', 'croppers'], function () { var $ = layui.jquery , form = layui.form , croppers = layui.croppers , layer = layui.layer; //创建上传组件 croppers.render({ elem: '#editimg' , saveW: 150//保存宽度 , saveH: 150 , mark: 1 / 1 //选取比例 , area: ['90%', '80%']//弹窗宽度 , url: 'upload.php' , done: function (res) { console.log(res.imgUrl) $("#inputimgurl").val(res.imgUrl); $("#srcimgurl").html('<img src="' + res.imgUrl + '" width="30" class="layui-upload-img">'); } }); });
PHP后端上传
<?php $upload_dir = 'upload'; $newDate = date("Y-m"); $imgUrl = $upload_dir . '/' . $newDate; if (!is_dir($upload_dir)) { mkdir($upload_dir); } if (!is_dir($imgUrl)) { mkdir($imgUrl); } //获取传递参数; $file = $_FILES['file']; $ext = explode('.', $_FILES['file']['name']); $ext = end($ext); $fileName = md5(time()) . "." . $ext; //执行上传; if (isset($_FILES['file']) && $_FILES['file']['error'] == "0") { //上传图片； move_uploaded_file($file['tmp_name'], $imgUrl . "/" . $fileName); $safe_img = $imgUrl . "/" . $fileName; //返回JSON； $res['code'] = "0"; $res['imgUrl'] = $safe_img; $res['err'] = '上传成功!'; die(json_encode($res)); }
@lockdata.cn
