Bolehkah jquery memangkas imej?

JQuery ialah perpustakaan JavaScript yang digunakan secara meluas dalam pembangunan bahagian hadapan web Ia menyediakan satu siri API yang boleh mengendalikan Model Objek Dokumen (DOM), mengendalikan acara, memulakan permintaan AJAX, mencipta elemen HTML secara dinamik dan banyak lagi. Sebagai tambahan kepada aplikasi biasa ini, JQuery juga menyediakan beberapa pemalam dan sambungan yang berguna, termasuk pemalam pemangkasan imej.

Pemotongan imej adalah keperluan biasa, terutamanya dalam tapak web atau aplikasi di mana imej yang dimuat naik pengguna perlu dimuat naik dan diproses. Pemalam pemangkasan imej JQuery menjadikan pemangkasan imej mudah dan ringkas tanpa menulis kod JavaScript atau CSS yang kompleks.

Seterusnya, artikel ini akan memperkenalkan beberapa pemalam pemangkasan imej yang popular untuk JQuery dan cara menggunakannya untuk memangkas imej anda.

1. JQuery-Cropbox

JQuery-Cropbox ialah pemalam pemangkasan imej JQuery ringan yang mudah digunakan dan disepadukan ke dalam tapak web atau aplikasi anda. Ia menyokong fungsi zum, seret dan lepas, dan pemangkasan, dan boleh menyimpan imej yang dipangkas dalam format Base64 atau Blob untuk mudah dimuat naik ke pelayan atau pemprosesan menggunakan API lain.

Langkah-langkah untuk menggunakan JQuery-Cropbox adalah seperti berikut:

Mula-mula, perkenalkan fail pergantungan yang diperlukan dalam fail HTML:

<link rel="stylesheet" href="https://rawgit.com/creativeaura/cropbox/master/demo/cropbox.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://rawgit.com/creativeaura/cropbox/master/demo/cropbox.js"></script>

Kemudian, cipta elemen imej pada halaman:

<img src="image.jpg" id="image" />

Seterusnya, panggil fungsi Cropbox dalam fail JavaScript untuk memulakan pemalam dan tetapkan pilihan yang diperlukan:

$(function() {
    var options = {
        // 设置裁剪框的宽度和高度
        width: 200,
        height: 200,
        // 设置裁剪后的图像最大宽度和高度
        maxWidth: 800,
        maxHeight: 800,
        // 设置允许缩放的最小和最大比例
        minZoom: 0.1,
        maxZoom: 10,
        // 设置是否允许拖放裁剪框
        enableResize: true,
        // 设置是否允许选择图像区域
        enableSelect: true,
        // 设置是否显示裁剪框
        showControls: true,
        // 设置是否显示裁剪比例选项
        showAspectRatio: true,
        // 设置是否显示预览图像
        preview: '.preview',
        // 设置裁剪后的图像输出格式（Base64 或 Blob）
        outputType: 'blob',
        // 设置裁剪完成后的回调函数
        onCrop: function(data) {
            console.log(data);
        }
    };
    $('#image').cropbox(options);
});

Antaranya, lebar dan tinggi kotak tanaman, lebar maksimum dan ketinggian maksimum, dan Pilihan penskalaan seperti skala boleh diubah mengikut keperluan.

2. JQuery-Image-Crop

JQuery-Image-Crop ialah satu lagi pemalam pemangkasan imej JQuery yang popular, yang menyediakan tahap penyesuaian yang tinggi dan set ciri yang kaya. Termasuk pratonton, putaran, penskalaan, pelarasan ketelusan dan nisbah pemangkasan, dsb. Sama seperti JQuery-Cropbox, JQuery-Image-Crop boleh mengeluarkan imej yang dipangkas ke dalam format Base64 atau Blob untuk memuat naik atau memproses dengan mudah menggunakan API lain.

Langkah-langkah untuk menggunakan JQuery-Image-Crop adalah seperti berikut:

Mula-mula, perkenalkan fail pergantungan yang diperlukan dalam fail HTML:

<link rel="stylesheet" href="https://unpkg.com/jquery-image-crop/dist/css/jquery.Jcrop.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/jquery-image-crop/dist/js/jquery.Jcrop.min.js"></script>

Kemudian, cipta elemen imej pada halaman :

<img src="image.jpg" id="image" />

Seterusnya, panggil fungsi Jcrop dalam fail JavaScript untuk memulakan pemalam dan tetapkan pilihan yang diperlukan:

$(function () {
    var options = {
        // 设置裁剪框的宽度和高度
        aspectRatio: 1,
        // 设置预览图像的容器元素
        preview: '.jcrop-preview',
        // 设置裁剪完成后的回调函数
        onSelect: function (coords) {
            console.log(coords);
        }
    };
    $("#image").Jcrop(options);
});

Antaranya, lebar dan ketinggian pemangkasan kotak, nisbah tanaman, bekas pratonton Pilihan seperti elemen boleh diubah mengikut keperluan.

Secara amnya, pemalam pemangkasan imej JQuery boleh memangkas imej dengan mudah dan mengeluarkannya dalam format yang diperlukan, sangat memudahkan aliran kerja pembangunan bahagian hadapan dan menjadikan pemprosesan imej lebih cekap dan lebih pantas. Pada masa yang sama, orang ramai boleh memilih pemalam yang berbeza mengikut keperluan mereka sendiri dan memilih alat pemangkasan yang paling sesuai untuk melayani halaman web dan aplikasi dengan lebih baik.

Atas ialah kandungan terperinci Bolehkah jquery memangkas imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!