cropper圖片編輯插件繪制圓形圖片
阿新 • • 發佈:2018-11-02
osi borde mas eat opera 如果 ace tro href
實現
在上傳圖片前需要對圖片進行編輯,我選用的是cropperjs插件
繪制圓圖的主要思路首先是將圖片選取框中的可見區域設置為圓形,再在上傳圖片時在原圖的基礎上通過JS選取出一個圓圖,再將選取的圓圖上傳到後臺接口
- 通過CSS設置cropper選取框的樣式為圓形
.cropper-view-box, .cropper-face {
border-radius: 50%;
}
- 通過canvas在原圖的基礎上選取一個圓圖
function getRoundedCanvas(){ var crop=(...).data("cropper"); //獲取crop對象 var sourceCanvas=crop.getCroppedCanvas(); var canvas = document.createElement(‘canvas‘); var context = canvas.getContext(‘2d‘); var width = sourceCanvas.width; var height = sourceCanvas.height; canvas.width = width; canvas.height = height; context.imageSmoothingEnabled = true; context.drawImage(sourceCanvas, 0, 0, width, height); context.globalCompositeOperation = ‘destination-in‘; context.beginPath(); context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true); context.fill(); return canvas; }
- 通過步驟2即可得到一個圓圖的canvas,這裏需要註意的是,如果通過toDataUrl方式轉圖片時,在格式為jpg的情況下,得到的圓圖的底色可能會變成黑色,這是因為在轉jpg的過程中,原先的透明度屬性會丟失,這裏我是通過統一設置圖片轉換格式為png格式來解決的,下面附上代碼
var dataurl=canvas.toDataURL("image/png"); var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } var filename=(...); var f=new File([u8arr],filename,{type:"image/png"});
過程中查閱的文檔:
- cropperjs圓形處理
- cropperjs文檔
- canvas參考手冊
cropper圖片編輯插件繪制圓形圖片