Okay, hier ist ein vollständiges Codebeispiel, das Laui und Cropper.js integriert, um das Zuschneiden von Bildern zu implementieren, einschließlich Bildrotationsfunktion und Verschönerungsstil:
HTML Quelltext:
<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-Code:
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;
});
}
});
In diesem Beispiel haben wir zwei Module über uploadLayUI eingeführt croppers. Zuerst verwenden wir upload.render()die Methode, um die Schnittstelle zum Hochladen von Bildern zu rendern, wobei elemder Parameter die ID oder den CSS-Klassennamen der Upload-Schaltfläche darstellt, urlder Parameter die Serveradresse des hochgeladenen Bildes darstellt und acceptMimeder Parameter den Dateityp darstellt. Die Rückruffunktion wird aufgerufen, wenn der Benutzer das Hochladen des Bildes abgeschlossen hat done. In der Rückruffunktion ermitteln wir das vom Server zurückgegebene Ergebnis. Wenn der Upload erfolgreich ist, können wir initCropper()die Methode aufrufen, um die Bildzuschneidekomponente zu initialisieren. Bei initCropper()dieser Methode verwenden wir croppersdie vom Modul bereitgestellte API, um Vorgänge wie Drehen, Sperren der Proportionen und Zuschneiden des Bildes abzuschließen. Schließlich können wir cropper('getCroppedCanvas')das zugeschnittene Bild durch Aufrufen der Methode abrufen und auf der Seite anzeigen.