layui框架实战案例(8)：web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)
关于《layui框架实战案例(8)：web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)》，现在小知识百科站小编给您分享一下，希望您阅读完本篇内容后能有所收获。如果对您有所帮助别忘了关注本站哦。
支持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组件调用
.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));
}本文关键词：PHP后端上传,layui组件调用,web图片裁切插件,裁切插件croppers,layui,实现,后端,php,croppers.js。以上就是关于“layui框架实战案例(8)：web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)”的所有内容，希望分享的内容对您有帮助！更多的相关知识内容，请继续关注《小知识百科站》网站：http://www.370300.com/！。