国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼

來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:06:20
文檔

微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼

微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼:前言 最近在開發(fā)小程序,產(chǎn)品經(jīng)理提了一個(gè)需求,要求微信小程序換頭像,用戶剪裁圖片必須是圓形,也在github上看了一些例子,一般剪裁圖片用的都是方形,所以自己打算寫一個(gè)小組件,可以把圖片剪裁成圓形,主要思路就是使用canvas繪圖,把剪裁的圖片繪制成圓
推薦度:
導(dǎo)讀微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼:前言 最近在開發(fā)小程序,產(chǎn)品經(jīng)理提了一個(gè)需求,要求微信小程序換頭像,用戶剪裁圖片必須是圓形,也在github上看了一些例子,一般剪裁圖片用的都是方形,所以自己打算寫一個(gè)小組件,可以把圖片剪裁成圓形,主要思路就是使用canvas繪圖,把剪裁的圖片繪制成圓

前言

最近在開發(fā)小程序,產(chǎn)品經(jīng)理提了一個(gè)需求,要求微信小程序換頭像,用戶剪裁圖片必須是圓形,也在github上看了一些例子,一般剪裁圖片用的都是方形,所以自己打算寫一個(gè)小組件,可以把圖片剪裁成圓形,主要思路就是使用canvas繪圖,把剪裁的圖片繪制成圓形,另外剪裁圖片的窗口還可以移動(dòng)放大縮小,這個(gè)功能就用了微信組件movable-view,好了,該說的也說完了,下面咱們開始擼代碼。

movable-view組件

可移動(dòng)的視圖容器,在頁面中可以拖拽滑動(dòng)

會有好多個(gè)屬性,在這里不一一介紹,只說我們能用到的就可以。

我們用到的屬性主要有:

1.direction:movable-view的移動(dòng)方向,屬性值有all、vertical、horizontal、none

2.scale:是否支持雙指縮放,默認(rèn)縮放手勢生效區(qū)域是在movable-view內(nèi)

3.scale-min 定義縮放倍數(shù)最小值

4.scale-max 定義縮放倍數(shù)最大值

5.bindchange 拖動(dòng)過程中觸發(fā)的事件,event.detail = {x: x, y: y, source: source},其中source表示產(chǎn)生移動(dòng)的原因,值可為touch(拖動(dòng))、touch-out-of-bounds(超出移動(dòng)范圍)、out-of-bounds(超出移動(dòng)范圍后的回彈)、friction(慣性)和空字符串(setData)

6.bindscale 縮放過程中觸發(fā)的事件,event.detail = {x: x, y: y, scale: scale},其中x和y字段在2.1.0之后開始支持返回

主要用到的就是這幾個(gè)值

另外使用movable-view的時(shí)候必須在外邊加一個(gè)movable-area的父元素,不然的話沒有移動(dòng)區(qū)域。

movable-view 的可移動(dòng)區(qū)域,屬性只有:

scale-area 當(dāng)里面的movable-view設(shè)置為支持雙指縮放時(shí),設(shè)置此值可將縮放手勢生效區(qū)域修改為整個(gè)movable-area,是個(gè)boolean值,默認(rèn)false

截取區(qū)域的移動(dòng)已經(jīng)說完了,詳情請看傳送門

canvas繪圖

畫布。該組件是原生組件可以繪制圖像,分享朋友圈生成海報(bào)就經(jīng)常用到這個(gè)屬性,就簡單的說下:

在wxml中必須要有canvas這個(gè)標(biāo)簽,才可以繪制圖像,而且要有canvas-id屬性,代表canvas 組件的唯一標(biāo)識符,
還有許多API我就不一一介紹了,底下用的API代碼當(dāng)中都會用注釋。詳情請看微信小程序畫布API傳送門

代碼實(shí)現(xiàn)

1.首先是選擇圖片

wxml就是初始化一個(gè)按鈕點(diǎn)擊的時(shí)候選擇圖片,而且需要引入我們封裝的截取圖片組件,并把圖片作為參數(shù)傳進(jìn)去,封裝組件方法請看我另一篇文章組件封裝

index.wxml

Tip: 必須把canvas放到引入剪裁組件的wxml中,否則繪制不成功,因?yàn)閏anvas是原生組件脫離在 WebView 渲染流程外。

<view class="container">
 <button wx:if="{{!imgSrc}}" bindtap="getImgurl"> 選擇圖片 </button>
 <view class="clip-box" wx:if="{{imgSrc}}">
 <ClipImg imgSrc="{{imgSrc}}"></ClipImg>
 </view>
</view>
<canvas canvas-id="myCanvas" style="position:absolute; width:100%;height:100%;border: 1px solid red;left: -9999px; top: -9999px;"></canvas>

index.json引入截取圖片的組件

{
 "component": true,
 "usingComponents": {
 "ClipImg": "../../component/clipImg/clipImg"
 }
}

index.js上傳圖片顯示

const app = getApp()

Page({
 data: {
 imgSrc: ''
 },
 //選擇圖片
 getImgurl: function () {
 wx.chooseImage({
 count: 1, // 默認(rèn)9
 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī),默認(rèn)二者都有
 success: (res) => {
 // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
 const tempFilePaths = res.tempFilePaths;
 //啟動(dòng)上傳等待中... 
 wx.showToast({ 
 title: '正在上傳...', 
 icon: 'loading', 
 mask: true, 
 duration: 1000 
 }) 
 this.setData({
 imgSrc: res.tempFilePaths
 })
 }
 })
 },
 onLoad: function () {
 }
})

接下來就是剪裁圖片組件的封裝

首先是頁面布局,也就是clipImg.wxml

<view class="clip">
 <image class="head-img" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx" src="{{imageUrl}}"></image>
 <movable-area scale-area style="width:{{cropperW}}rpx;height:{{cropperH}}rpx">
 <movable-view bindchange="move" bindscale="scale" direction="all" scale scale-min="0.5" scale-max="1.8">
 </movable-view>
 </movable-area>
 <view class="btn">
 <text bindtap="cancel">取消</text>
 <text bindtap="getImageInfo">保存</text>
 </view>
</view>

大概就是這個(gè)樣子

上邊的圓就是截取就是截取框。

然后就是clipImg.js文件主要就是對圖片截取的一些操作

Component({
 /**
 * 組件的屬性列表
 */
 properties: {
 imgSrc: {
 type: 'String',
 value: ''
 }
 },
 /**
 * 組件的初始數(shù)據(jù)
 * imageUrl string 初始化圖片
 * cropperW string 縮小圖寬度
 * cropperH string 縮小圖高度,
 * img_ratio string 圖片比例,
 * IMG_W string 原圖高度,
 * IMG_H string 原圖高度,
 * left string 圖片距離左邊距離,
 * top string 圖片距離上邊距離,
 * clipW number 默認(rèn)截取框
 */
 data: {
 imageUrl: '',
 cropperW: '',
 cropperH: '',
 img_ratio: '',
 IMG_W: '',
 IMG_H: '',
 left: '',
 top: '',
 clipW: 200
 },
 /**
 * 組件的方法列表
 */
 methods: {
 //點(diǎn)擊取消
 cancel: function () {
 var myEventDetail = {} // detail對象,提供給事件監(jiān)聽函數(shù)
 var myEventOption = {} // 觸發(fā)事件的選項(xiàng)
 this.triggerEvent('myevent', myEventDetail, myEventOption)
 },
 //拖拽事件
 move: function ({ detail }) {
 this.setData({
 left: detail.x * 2,
 top: detail.y * 2
 })
 },
 //縮放事件
 scale: function ({ detail }) {
 console.log(detail.scale)
 this.setData({
 clipW: 200 * detail.scale
 })
 },
 //生成圖片
 getImageInfo: function () {
 wx.showLoading({
 title: '圖片生成中...',
 })
 const img_ratio = this.data.img_ratio;
 //要截取canvas的寬
 const canvasW = (this.data.clipW / this.data.cropperW) * this.data.IMG_W
 //要截取canvas的高
 const canvasH = (this.data.clipW / this.data.cropperH) * this.data.IMG_H
 //要截取canvas到左邊距離
 const canvasL = (this.data.left / this.data.cropperW) * this.data.IMG_W
 //要截取canvas到上邊距離
 const canvasT = (this.data.top / this.data.cropperH) * this.data.IMG_H
 // 將圖片寫入畫布
 const ctx = wx.createCanvasContext('myCanvas');
 //繪制圖像到畫布
 ctx.save(); // 先保存狀態(tài) 已便于畫完圓再用 
 ctx.beginPath(); //開始繪制 
 ctx.clearRect(0, 0, 1000, 1000)
 //先畫個(gè)圓 
 ctx.arc(this.data.clipW / 2, this.data.clipW / 2, this.data.clipW / 2, 0, 2 * Math.PI, false)
 ctx.clip();//畫了圓 再剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域,則所有之后的繪圖都會被限制在被剪切的區(qū)域內(nèi) 
 ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, 0, 0, this.data.clipW, this.data.clipW); // 推進(jìn)去圖片 
 ctx.restore(); //恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 可以繼續(xù)繪制
 ctx.draw(true, () => {
 // 獲取畫布要裁剪的位置和寬度 
 wx.canvasToTempFilePath({
 x: 0,
 y: 0,
 width: this.data.clipW,
 height: this.data.clipW,
 destWidth: this.data.clipW,
 destHeight: this.data.clipW,
 quality: 0.5,
 canvasId: 'myCanvas',
 success: (res) => {
 wx.hideLoading()
 /**
 * 截取成功后可以上傳的服務(wù)端直接調(diào)用
 * wx.uploadFile();
 */
 //成功獲得地址的地方
 wx.previewImage({
 current: '', // 當(dāng)前顯示圖片的http鏈接
 urls: [res.tempFilePath] // 需要預(yù)覽的圖片http鏈接列表
 })
 }
 })
 })
 }
 },
 ready: function () {
 this.setData({
 imageUrl: this.data.imgSrc[0]
 })
 //獲取圖片寬高
 wx.getImageInfo({
 src: this.data.imageUrl,
 success: (res) => {
 console.log('圖片信息', res);
 //圖片實(shí)際款高
 const width = res.width;
 const height = res.height;
 //圖片寬高比例
 const img_ratio = width / height
 this.setData({
 img_ratio,
 IMG_W: width,
 IMG_H: height,
 })
 if (img_ratio >= 1) {
 //寬比較大,橫著顯示
 this.setData({
 cropperW: 750,
 cropperH: 750 / img_ratio,
 })
 } else {
 //豎著顯示
 this.setData({
 cropperW: 750 * img_ratio,
 cropperH: 750
 })
 }
 } 
 })
 }
})

到現(xiàn)在為止一個(gè)截取圖片就完成了,可能會有些問題,比如截取的圖片的框沒有居中,自己可以再次封裝這個(gè)組件,因?yàn)楝F(xiàn)在已經(jīng)適合我們公司自己項(xiàng)目了。我們來預(yù)覽下。另外這個(gè)組件支持雙指放大截取框來截取圖片,不過微信開發(fā)者工具不能展示,自己可以把代碼下載下來,在自己手機(jī)上掃碼查看效果。


另外我把項(xiàng)目放到了github上邊,希望小哥哥小姐姐們多多點(diǎn)贊,多多支持,有什么疑問可以在github上問我,謝謝。點(diǎn)贊的小哥哥小姐姐最可愛,哈哈哈。。

項(xiàng)目地址鏈接描述

推薦:

感興趣的朋友可以關(guān)注小編的微信公眾號【碼農(nóng)那點(diǎn)事兒】,更多網(wǎng)頁制作特效源碼及學(xué)習(xí)干貨哦!!!

總結(jié)

以上所述是小編給大家介紹的微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼

微信小程序之裁剪圖片成圓形的實(shí)現(xiàn)代碼:前言 最近在開發(fā)小程序,產(chǎn)品經(jīng)理提了一個(gè)需求,要求微信小程序換頭像,用戶剪裁圖片必須是圓形,也在github上看了一些例子,一般剪裁圖片用的都是方形,所以自己打算寫一個(gè)小組件,可以把圖片剪裁成圓形,主要思路就是使用canvas繪圖,把剪裁的圖片繪制成圓
推薦度:
標(biāo)簽: 圖片 小程序 微信小程序
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产精品久久久久久久久免费 | 亚洲欧美第一 | 亚洲国产欧美在线 | 日本一区二区三区在线播放 | 成人在线日韩 | 亚洲三级电影网 | 日本免费黄色网址 | 久久无码av三级 | 日本特级淫片免费看 | 91chinese在线| 免费a一毛片 | 国产在线一区二区三区四区 | 亚洲欧美日韩高清中文在线 | 国产一区在线播放 | 99国产精品高清一区二区二区 | 五月婷婷中文字幕 | 91色老99久久九九爱精品 | 欧美成人看片一区二区三区尤物 | 久久99精品国产99久久 | 国产精品久久久久久久免费 | 狠狠操夜夜 | 国产精品亚洲精品日韩动图 | 日本久久久久久久 | 国产最新进精品视频 | 91精品国产91久久久久 | 日本色图在线观看 | 欧美日韩色片 | 激情一区 | 欧美精品国产 | 免费观看性欧美大片 | 久久综合精品国产一区二区三区无 | 亚洲欧美日韩在线观看 | 欧美日韩高清 | 精品国产一区二区三区香蕉 | 夜夜操夜夜 | 国产美女一区二区 | 怡红院一区二区三区 | 95香蕉视频| 日韩欧美在线视频 | 欧美在线不卡视频 | 欧美成人h精品网站 |