資訊專欄INFORMATION COLUMN
摘要：圖片裁剪，壓縮是上傳圖片一定會遇到的問題。如何獲得裁剪的圖片呢獲取裁剪后的圖片信息首先我們可以獲得裁剪框的節點然后調用圖片質量圖片質量越好圖片大小越大這樣就得到了你裁剪的圖片了可以通過，放到你想要的節點里展示。
圖片裁剪，壓縮是上傳圖片一定會遇到的問題。這里把我測試cropper.js這款jquery插件的心得分享一下，可以給新手做參考。
引入插件相關文件,你們down到本地也可以。這是最基本的
基本的html結構,初始化裁剪框
這里初始化是掛載到img節點上，然后可以外包一個盒子對他的大小來做限制
![]()
左旋右旋
參數我就不說了，百度文檔一大堆
這里的兩個aspectRatio是裁剪框的寬高比例，autoCropArea是裁剪框占裁剪圖片的比例
$(".wait-crop").cropper({
aspectRatio: 1 / 1,
autoCropArea: .9
});
到這里已經可以生成一個裁剪框了，不禁要問。如何獲得裁剪的圖片呢？
獲取裁剪后的圖片信息首先我們可以獲得裁剪框的canvas節點
var cropCanvas = $(".wait-crop").cropper("getCroppedCanvas")
然后調用canvas API toDataURL("img/jpeg",圖片質量(0-1))//圖片質量越好圖片大小越大
var cropUrl = cropCanvas.toDataURL("image/jpeg", 0.4);
這樣就得到了你裁剪的圖片了可以通過attr(src)，放到你想要的img節點里展示。
附：如果后臺不接收base64怎么辦？調用canvas方法 toBlob()獲得一個blob對象，再通過以下代碼轉化為FormData
$(".wait-crop").cropper("getCroppedCanvas").toBlob(function(blob) {
var fd = new FormData();
fd.append("file", blob, "i.jpeg");
}）
附：左右旋轉需裁剪的圖片
$(".rotate_l").click(function() {
$(".wait-crop").cropper("rotate", -90);
})
$(".rotate_r").click(function() {
$(".wait-crop").cropper("rotate", 90);
})
你可能用到base64轉blob對象
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(",")[0].indexOf("base64") >= 0)
byteString = atob(base64Data.split(",")[1]);
else
byteString = unescape(base64Data.split(",")[1]);
var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92424.html
摘要：需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務器。原圖片對象上傳裁剪后的對象初始化圖片預覽根據裁剪參數繪制轉對象以下將對每個環節詳解?；蛘吒鶕@取裁剪信息包括旋轉和縮放用進行手動繪制。 前言 圖片裁剪上傳，不僅是一個很貼合用戶體驗的功能，還能夠統一特定圖片尺寸，優化網站排版，一箭雙雕。 需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務器。 我第一個想到的方法就是，將圖片和裁剪參數（x...
摘要：參考效果引入使用結構頭像頭像截圖彈窗取消截圖頭像保存引用具體使用可查看官網修改頭像參加文件點擊圖片初始化關閉彈窗保存截圖保存數據 參考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML結構 頭像 ...
摘要：參考效果引入使用結構頭像頭像截圖彈窗取消截圖頭像保存引用具體使用可查看官網修改頭像參加文件點擊圖片初始化關閉彈窗保存截圖保存數據 參考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML結構 頭像 ...
摘要：獲取圖片地址之后，進行截取圖片這里推薦一個插件點這里，具體怎么用就不再贅述。等截取圖片之后，需要將截取的文件轉換為二進制大文件。調取接口，將二進制大文件上傳即可。 上傳頭像插件 目的： 幫助開發者快速開發上傳頭像功能點 背景： 現在b，g能搜到的頭像上傳插件并不太好用，所以想提供一個比較自由度的上傳并且可以剪切的插件。 資源： 具體資源請查看這里 實現大致思路如下： 先有一個上傳的...
閱讀 3554·2019-08-30 12:58
閱讀 932·2019-08-29 16:37
閱讀 2808·2019-08-29 16:29
閱讀 3111·2019-08-26 12:18
閱讀 2376·2019-08-26 11:59
閱讀 3420·2019-08-23 18:27
閱讀 2796·2019-08-23 16:43
閱讀 3309·2019-08-23 15:23
