用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

給你的頭像加個圣誕帽吧

Rolan 2019-12-31 00:43

看著大伙都在弄這個,我自己也來試一哈,我分別用了兩種方式來實現,一種是普通的方式,一種是wxs方式 普通方式 效果圖如下: 思路 獲取頭像 選擇素材 縮放,移動,旋轉素材 生成canvas 生成圖片,保存圖片 實現 ...

看著大伙都在弄這個,我自己也來試一哈,我分別用了兩種方式來實現,一種是普通的方式,一種是wxs方式

普通方式

效果圖如下:

思路

  • 獲取頭像
  • 選擇素材
  • 縮放,移動,旋轉素材
  • 生成canvas
  • 生成圖片,保存圖片

實現方式

首先是獲取頭像,這個不用說,大家應該都會的。

選擇素材這里我準備了三張圣誕帽的素材,這個網上有很多,可以自己找下,然后我還做了一個選擇手機相冊的功能,如果你自己有素材的話也可以直接選擇這個功能。

縮放,移動,旋轉素材都是通過觸摸函數去實現的,這里是先將布局做好,然后在標簽上面綁定各個觸摸事件,通過返回的值在標簽的style里設置實現各個效果。

調整好了之后點擊保存頭像會獲取所有參數并將頭像畫出來,再通過 wx.canvasToTempFilePath() 將canvas生成圖片最后通過 wx.saveImageToPhotosAlbum() 保存圖片。

主要代碼

主要的函數就是下面這幾個,代碼片段我會放在文末,沒有什么比較難的地方,就是要注意下計算的時候不要算錯就行。

需要注意的點

由于素材的大小可能會有不同,所以在重新選擇素材的時候高度要重新設置一下,這里我用了一個方法來重置高度,主要是每次重新選擇素材的時候就用 wx.getImageInfo() 這個api去獲取圖片素材的寬高,再計算出寬高比。

wxs實現方式

實現方式

思路跟普通方式是一樣的,不同的是這里將綁定事件通過 wxs 去實現,直接設置標簽的參數而不通過邏輯層去處理,在性能上會比較好一點,不過這種實現方式在進行旋轉的時候最后生成的圖片會有不準,后面會說到。

參數的獲取是通過在標簽上設置style,然后點擊保存的時候用 wx.createSelectorQuery() 獲取各個參數的

獲取旋轉的值

由于 wx.createSelectorQuery() 并不能獲取到 rotate 這個參數,所以我是通過下面這種方式來拿到旋轉的值的,將旋轉值以寬度的形式賦值給 .vo-ro

但是我發現旋轉之后生成的圖片不是正確的,原因是旋轉之后通過 wx.createSelectorQuery() 拿到的寬高并不是圖片大小的寬高,而是旋轉之后的寬高,按理來說不應該是這樣的,即使通過樣式旋轉,它的寬高應該保持不變才對,這樣就造成了參數上的錯誤,所以畫出來的圖片是不準確的。

因為加了旋轉之后畫出來的圖片會不準確,暫時想不出別的方法,我把旋轉的按鈕先注釋掉了,只支持縮放跟拖拽。

總結

兩種方式,wxs性能要更好,但是效果沒第一種的好,看你要哪種了,最后祝大家圣誕節快樂,祝你生活愉快

developers.weixin.qq.com/s/Cizd1RmY7…

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: _鵝不食草_ 來自: 掘金
东方红彩票 - 购彩大厅 今天股市上证指数是 家庭资产配置 股票在线解答 国内十大配资平台排名 股票短线交易秘诀 私募资产配置基金管 股市行情分析软件手机用的 西部数据股票 炒股什么app 美股模拟炒股软件