亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

cppprimer / 1849人閱讀

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

背景

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

方案

樣式上通過(guò)CSS來(lái)控制cropper選取框?yàn)閳A形

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

處理圖片時(shí)通過(guò)canvas來(lái)實(shí)現(xiàn)

function getRoundedCanvas(){    
    var crop=(...).data("cropper");                                                        //獲取crop對(duì)象
????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;
}
其它注意點(diǎn)

需要注意的是，如果通過(guò)toDataUrl方式轉(zhuǎn)圖片時(shí)，在格式為jpg的情況下，得到的圓圖的底色可能會(huì)變成黑色，這是因?yàn)樵谵D(zhuǎn)jpg的過(guò)程中，原先的透明度屬性會(huì)丟失，這里我是通過(guò)統(tǒng)一設(shè)置圖片轉(zhuǎn)換格式為png格式來(lái)解決的。

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"});
查閱文檔的傳送門(mén)

1.fengyuanchen/cropperjs · GitHub
2.cropperjs
3.canvas參考手冊(cè)

csdn地址

芊芊尋

版權(quán)申明

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97991.html

相關(guān)文章

  • 無(wú)需Flash實(shí)現(xiàn)圖片裁剪——HTML5中級(jí)進(jìn)階

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

    JerryC 評(píng)論0 收藏0

  • 截取圖片生成頭像插件

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

    scq000 評(píng)論0 收藏0

  • 截取圖片生成頭像插件

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

    Aceyclee 評(píng)論0 收藏0

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

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

    SHERlocked93 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<