Utilice layui y crop.js para escribir una función de recorte de imagen, incluida la función de rotación de imagen y el estilo de embellecimiento.

Bien, aquí hay un ejemplo de código completo que integra layui y cropper.js para implementar el recorte de imágenes, incluida la función de rotación de imágenes y el estilo de embellecimiento:

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;
		});
	}
});

En este ejemplo, presentamos dos módulos a través de uploadLayUI croppers. Primero, usamos upload.render()el método para representar la interfaz para cargar imágenes, donde elemel parámetro representa el ID o el nombre de clase CSS del botón de carga, urlel parámetro representa la dirección del servidor de la imagen cargada y acceptMimeel parámetro representa el tipo de archivo. La función de devolución de llamada se llamará cuando el usuario complete la carga de la imagen done. En la función de devolución de llamada, determinamos el resultado devuelto por el servidor. Si la carga se realiza correctamente, podemos llamar initCropper()al método para inicializar el componente de recorte de imagen. En initCropper()el método, utilizamos croppersla API proporcionada por el módulo para completar operaciones como rotar, bloquear la proporción y recortar la imagen. Finalmente, podemos cropper('getCroppedCanvas')obtener la imagen recortada llamando al método y mostrándola en la página.