cropper圖片編輯插件繪制圓形圖片

cppprimer 發布于2019-08-23 12:08 / 1776人閱讀

摘要：背景項目中有一個編輯上傳用戶頭像的功能，之前選用了插件來處理編輯圖片的功能，現在還想做到類似等選取圓形圖像的功能，考慮結合來處理。

背景

項目中有一個編輯上傳用戶頭像的功能，之前選用了cropper插件來處理編輯圖片的功能，現在還想做到類似QQ等選取圓形圖像的功能，考慮結合cropper來處理。

方案

樣式上通過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;
}

其它注意點

需要注意的是，如果通過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"});

查閱文檔的傳送門

1.fengyuanchen/cropperjs · GitHub
2.cropperjs
3.canvas參考手冊

csdn地址

芊芊尋

版權申明

此文章版權為本人所有，非經本人許可禁止復制轉載。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97991.html

無需Flash實現圖片裁剪——HTML5中級進階

摘要：需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務器。原圖片對象上傳裁剪后的對象初始化圖片預覽根據裁剪參數繪制轉對象以下將對每個環節詳解。或者根據獲取裁剪信息包括旋轉和縮放用進行手動繪制。前言圖片裁剪上傳，不僅是一個很貼合用戶體驗的功能，還能夠統一特定圖片尺寸，優化網站排版，一箭雙雕。需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務器。我第一個想到的方法就是，將圖片和裁剪參數（x...

JerryC 2019-08-19 18:17 評論0 收藏0
截取圖片生成頭像插件

摘要：獲取圖片地址之后，進行截取圖片這里推薦一個插件點這里，具體怎么用就不再贅述。等截取圖片之后，需要將截取的文件轉換為二進制大文件。調取接口，將二進制大文件上傳即可。上傳頭像插件目的：幫助開發者快速開發上傳頭像功能點背景：現在b，g能搜到的頭像上傳插件并不太好用，所以想提供一個比較自由度的上傳并且可以剪切的插件。資源：具體資源請查看這里實現大致思路如下：先有一個上傳的...

scq000 2019-08-01 17:43 評論0 收藏0
截取圖片生成頭像插件

摘要：獲取圖片地址之后，進行截取圖片這里推薦一個插件點這里，具體怎么用就不再贅述。等截取圖片之后，需要將截取的文件轉換為二進制大文件。調取接口，將二進制大文件上傳即可。上傳頭像插件目的：幫助開發者快速開發上傳頭像功能點背景：現在b，g能搜到的頭像上傳插件并不太好用，所以想提供一個比較自由度的上傳并且可以剪切的插件。資源：具體資源請查看這里實現大致思路如下：先有一個上傳的...

Aceyclee 2019-08-21 16:50 評論0 收藏0
JQuery 插件圖片裁剪插件cropper.js使用,上傳

摘要：圖片裁剪，壓縮是上傳圖片一定會遇到的問題。如何獲得裁剪的圖片呢獲取裁剪后的圖片信息首先我們可以獲得裁剪框的節點然后調用圖片質量圖片質量越好圖片大小越大這樣就得到了你裁剪的圖片了可以通過，放到你想要的節點里展示。圖片裁剪，壓縮是上傳圖片一定會遇到的問題。這里把我測試cropper.js這款jquery插件的心得分享一下，可以給新手做參考。引入插件相關文件,你們down到本地也可以。這...

SHERlocked93 2019-08-22 13:46 評論0 收藏0