jQuery Cropper是一個強大的Javascript圖像裁剪庫。它可以幫助用戶按照設定的比例、大小、位置,將圖像進行裁剪。這個庫具有很多好處,例如易于使用、支持裁剪多種格式的圖片,同時還可以縮放、移動及旋轉圖像。
var $image = $('#image'); $image.cropper({ aspectRatio: 16 / 9, crop: function(e) { console.log(e); } });
上面這段代碼演示了如何使用jQuery Cropper進行一次圖片裁剪。我們首先需要從HTML中獲取我們需要裁剪的圖片,然后實例化Cropper,傳入需要的參數來定義裁剪選項。其中包括比例,即寬高比。
我們可以通過crop方法來捕捉到圖像所進行的任何操作。這個方法將返回一個對象,其中包括裁剪的坐標、寬高、角度等信息。這將幫助用戶獲取以后用到的裁剪圖像信息,例如用戶上傳的時候需要傳遞給后端處理的圖片信息。
var $inputImage = $('#inputImage'); $inputImage.change(function() { var fileReader = new FileReader(), files = this.files, file; if (!files.length) { return; } file = files[0]; if (/^image\/\w+$/.test(file.type)) { fileReader.readAsDataURL(file); fileReader.onload = function () { $image.cropper('destroy').attr('src', this.result).cropper(options); $inputImage.val(''); }; } else { alert('Please choose an image file.'); } });
上面這個代碼演示了如何將用戶所選擇的圖片加載到Cropper中。首先需要獲取到用戶選擇的圖片,然后判斷是否是圖片文件。如果是,就使用fileReader讀取該圖片,并將其轉化為base64格式,在將這個字符串轉化為圖片,最后將裁剪對象初始化。這個過程非常簡單,簡單幾行代碼即可完成。
總之,jQuery Cropper是一個強大而易于使用的圖像裁剪庫,通過它,您可以快速創建一個簡單的圖片裁剪應用程序。