使用layui 和 croppers.js 写一段图片裁剪的功能，包含图片旋转功能，并美化样式

好的，下面是对 layui 和 cropper.js 的整合，实现图片裁剪的完整代码示例，包含图片旋转功能和美化样式：

HTML 代码：

<div class="layui-upload-drag" id="upload-demo">
    <i class="layui-icon layui-icon-upload"></i>
    <p>点击上传，或将图片拖拽到此处</p>
    <img src="" alt="" class="layui-upload-img" id="demo">
</div>

<div class="layui-card" style="margin-top: 20px;">
    <div class="layui-card-header">图片裁剪</div>
    <div class="layui-card-body">
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="image">
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <canvas id="canvas"></canvas>
            </div>
            <div class="layui-col-md4">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <button class="layui-btn layui-btn-primary layui-btn-block" id="rotateLeft">向左旋转</button>
                    </div>
                    <div class="layui-col-md6">
                        <button class="layui-btn layui-btn-primary layui-btn-block" id="rotateRight">向右旋转</button>
                    </div>
                </div>

                <hr>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <button class="layui-btn layui-btn-primary layui-btn-block"
                            id="setAspectRatio">锁定比例</button>
                    </div>
                    <div class="layui-col-md6">
                        <button class="layui-btn layui-btn-primary layui-btn-block"
                            id="clearAspectRatio">不锁定比例</button>
                    </div>
                </div>

                <hr>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <button class="layui-btn layui-btn-primary layui-btn-block"
                            id="getCroppedCanvas">裁剪</button>
                    </div>
                    <div class="layui-col-md6">
                        <button class="layui-btn layui-btn-primary layui-btn-block"
                            id="setCanvasData">重置</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

JavaScript 代码：

layui.use(['upload', 'cropper'], function () {
    
    
	var upload = layui.upload;
	var croppers = layui.cropper;
	var base64;

	// 初始化上传图片
	upload.render({
    
    
        elem: '#upload-demo',
        url: '/upload/',
        acceptMime: 'image/*',
        done: function (res) {
    
    
            if (res.code === 0) {
    
    
                $("#demo").attr("src", res.data.src);
                initCropper();
            }
            else {
    
    
                layer.msg(res.msg, {
    
     icon: 5 });
            }
        },
        error: function () {
    
    
            layer.msg('上传失败，请重试！', {
    
     icon: 5 });
        }
    });

	/**
	 * 初始化裁剪框
	 */
	function initCropper() {
    
    
		var options = {
    
    
			aspectRatio: 1, // 默认比例
			preview: '.layui-upload-list',
			crop: function (e) {
    
    
				console.log(e);
			}
		};
		$("#demo").cropper(options);

		// 旋转图片
		$('#rotateLeft').on('click', function () {
    
    
			$("#demo").cropper('rotate', -90);
			return false;
		});

		$('#rotateRight').on('click', function () {
    
    
			$("#demo").cropper('rotate', 90);
			return false;
		});

		// 锁定比例
		$('#setAspectRatio').on('click', function () {
    
    
			$("#demo").cropper('setAspectRatio', 1);
			return false;
		});

		// 不锁定比例
		$('#clearAspectRatio').on('click', function () {
    
    
			$("#demo").cropper('setAspectRatio', NaN);
			return false;
		});

		// 裁剪图片
		$('#getCroppedCanvas').on('click', function () {
    
    
			var canvas = $("#demo").cropper('getCroppedCanvas', {
    
     width: 200, height: 200 });
			base64 = canvas.toDataURL('image/jpeg');

			$('#canvas').html(canvas);
			return false;
		});

		// 重置裁剪框
		$('#setCanvasData').on('click', function () {
    
    
			$("#demo").cropper('reset');
			return false;
		});
	}
});

在这个例子中，我们通过 LayUI 引入了 upload 和 croppers 两个模块。首先，我们使用 upload.render() 方法来渲染上传图片的界面，其中 elem 参数表示上传按钮的 ID 或 CSS 类名，url 参数表示上传图片的服务器地址，acceptMime 参数表示文件类型。当用户上传图片完成后会调用 done 回调函数。在回调函数中，我们判断了服务器返回的结果，如果上传成功，我们就可以调用 initCropper() 方法来初始化图片裁剪组件。在 initCropper() 方法中，我们使用 croppers 模块提供的 API 完成图片的旋转、锁定比例、裁剪等操作。最终，我们可以通过调用 cropper('getCroppedCanvas') 方法来获取裁剪后的图片，并将其展示在页面上。