支持移动触摸事件
基于canvas技术，支持canvas的浏览器都可以使用该插件
通过Base64编码导出剪裁后的图片。 可以通过json数据来获取图片的位置和大小
可以通过json数据来设置图片的位置和大小
可以通过URL来获取图片。
HTML代码部分：
<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>
<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组件调用
.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));
}
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！