Use layui e crop.js para escrever uma função de corte de imagem, incluindo função de rotação de imagem e estilo de embelezamento.

Ok, aqui está um exemplo de código completo que integra layui e cropper.js para implementar o corte de imagem, incluindo função de rotação de imagem e estilo de embelezamento:

Código 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>

Código 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;
		});
	}
});

Neste exemplo, introduzimos dois módulos através do uploadLayUI croppers. Primeiro, usamos upload.render()o método para renderizar a interface de upload de imagens, onde elemo parâmetro representa o ID ou nome da classe CSS do botão de upload, urlo parâmetro representa o endereço do servidor da imagem carregada e acceptMimeo parâmetro representa o tipo de arquivo. A função de retorno de chamada será chamada quando o usuário concluir o upload da imagem done. Na função de retorno de chamada, determinamos o resultado retornado pelo servidor. Se o upload for bem-sucedido, podemos chamar initCropper()o método para inicializar o componente de corte de imagem. No initCropper()método, utilizamos croppersa API fornecida pelo módulo para realizar operações como rotação, bloqueio de proporção e corte da imagem. Finalmente, podemos cropper('getCroppedCanvas')obter a imagem recortada chamando o método e exibi-la na página.