成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

cppprimer / 1788人閱讀

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

背景

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

方案

樣式上通過CSS來控制cropper選取框為圓形

.cropper-view-box, .cropper-face {
    border-radius: 50%;
}

處理圖片時通過canvas來實現(xiàn)

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方式轉(zhuǎn)圖片時，在格式為jpg的情況下，得到的圓圖的底色可能會變成黑色，這是因為在轉(zhuǎn)jpg的過程中，原先的透明度屬性會丟失，這里我是通過統(tǒng)一設置圖片轉(zhuǎn)換格式為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地址

芊芊尋

版權(quán)申明

此文章版權(quán)為本人所有，非經(jīng)本人許可禁止復制轉(zhuǎn)載。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97991.html

相關(guān)文章

  • 無需Flash實現(xiàn)圖片裁剪——HTML5中級進階

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

    JerryC 評論0 收藏0

  • 截取圖片生成頭像插件

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

    scq000 評論0 收藏0

  • 截取圖片生成頭像插件

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

    Aceyclee 評論0 收藏0

  • JQuery 插件圖片裁剪插件cropper.js使用,上傳

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

    SHERlocked93 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<