教你使用Cocos Creator製作國旗頭像生成器,附原始碼!
關注「程式設計小王子」公眾號回覆【頭像生成器】獲得原始碼!
下面我重點介紹一下Cocos Creator H5頭像生成的實現方法:
- 獲取手機相簿圖片
- 在 Cocos Creator 中載入相簿圖片
- Cocos Creator 螢幕截圖
- 使用HMTL顯示截圖圖片
- 儲存圖片到相簿
獲取相簿圖片
要獲取手機相簿圖片,需要使用瀏覽器 input 標籤提供的能力,在桌面瀏覽器上則是瀏覽檔案目錄選擇圖片。
使用 document 動態建立 input HTML標籤,並設定屬性為type 為 file,accept 為"image/*",同時使用 CSS 控制元件一下 input 的位置
let input = document.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.setAttribute('style', 'position:absolute;margin-left:30%;margin-top:50px;-webkit-user-select:file')
document.getElementsByTagName('body')[0].appendChild(input);
當選擇好圖片後,還需要監聽 input 標籤的 change 事件,我們好方便獲取圖片的資料:
let oninput = (e) => {
//拿到檔案物件
var file = e.target.files[0];
//讀取檔案資料
reader = new FileReader();
reader.readAsDataURL(file);
//檔案載入成功以後,渲染到頁面
reader.onload = (e)=> {
...
}
}
//監聽input的change事件
input.addEventListener('change', oninput);
在 Cocos Creator 中載入相簿圖片
FileReader 的 onload 回撥事件中,我們將圖片放入 HTML 的 img 標籤中
reader.onload = (e)=> {
//建立一個img標籤載入圖片資料
var img = document.createElement("img");
img.src = e.target.result;
//再通過img轉換成Creator的Textures2D物件
let texture = new cc.Texture2D();
texture._nativeAsset = img;
texture.on('load', () => {
//最後設定到精靈上
this.sprite.spriteFrame = new cc.SpriteFrame(texture);
})
}
- 建立 img 標籤,將讀取到的圖片設定到 img.src 屬性
- 建立 cc.Texture2D 物件,載入 img 中的紋理
- 當 Textrue2D 的 load 事件完成,就可以顯示到精靈元件上了
這裡需要注意,Cocos Creator 不能顯示超過2048 * 2048的圖片,你會發現直接在手機上使用手機拍的高清圖片顯示出來是一片黑色。
Cocos Creator 螢幕截圖
設定頭像的前景框非常簡單,這裡就不多說了,我看怎麼把合成的圖片儲存下來。這裡是參考的Cocos Creator的範例合集中capture_to_web的做法,簡單修改了一下,點選按鈕生成截圖:
save () {
//建立 HTML canvas 標籤儲存影象資料
this.createCanvas();
//將canvas的圖資料儲存到HTML img元素上
var img = this.createImg();
//顯示這個HTML img 元素
this.showImage(img);
this.iconBg.active = true;
this.label.node.active = true;
}
這裡生點看下ShowImage這個函式,我在修改了範例合集的作法:
showImage(img) {
//var img = document.createElement("img");
let offset = (cc.view._frameSize.width - this.srpite.node.width) / 2;
let top = (cc.view._frameSize.height - this.srpite.node.width) / 2;
cc.log('fs:', cc.view._frameSize.width);
cc.log('offset:', offset, img.width);
img.setAttribute('style', `position:absolute;margin-left:${offset}px ;margin-top:${top}px`);
document.getElementsByTagName('body')[0].appendChild(img);
this._img = img;
}
上面的程式碼主要是計算 img 元素的位置,將它放到瀏覽器螢幕中間。
儲存圖片到相簿
Cocos Creator 引擎在瀏覽器上是不能寫檔案的,因此我們上面是將圖片用HTML img 顯示,而不是用Sprite顯示。我們在手機上長按 img 元素就可以調出瀏覽器的儲存選單了,在桌面瀏覽器上可以滑鼠右鍵儲存,也可以直接拖動到桌面上。
小結
使用 Cocos Creator 不僅可以開發遊戲,也能製作有效的小應用,如果在頭像上載入一些Shader特效是不是會更酷呢?
相關推薦
教你使用Cocos Creator製作國旗頭像生成器,附原始碼!
關注「程式設計小王子」公眾號回覆【頭像生成器】獲得原始碼! 下面我重點介紹一下Cocos Creator H5頭像生成的實現方法:
Cocos Creator實現左右跳遊戲,附完整原始碼
1. 玩法說明 遊戲開始後,點選螢幕左右兩側,機器人朝左上方或右上方跳一步,如果下一步有石塊,成功得1分,否則遊戲結束。 2. 模組介紹 遊戲場景分為2個:主頁場景(home)、遊戲場景(game)。 &nbs
Cocos creator製作微信小遊戲儲存圖片,音訊檔案到本地(手機,瀏覽器)
cocos creator打包生成的wx-downloader.js檔案儲存到本地會報 no such file or directory 沒有上級目錄錯誤,這就我們自己修改這個檔案,主要用到了微信小程式中的api FileSystemManger.access 和 FileSystemManage
教你用 100 行 Node.js 程式碼,快速構建一個靜態網站生成器!
近日,我的一位同事向我尋求建議,她打算為自己構建一個部落格。於是,我對靜態網站生成器和部落格引擎進行了一番研究,發現 Hugo 是一個很不錯的選擇。但是,我的同事還有一些特殊要求,比如,她想要一個自定義的部落格網址和 CSS 主題。儘管這些 Hugo 都可以實現,但我並不打算花時間來學習它。我想自己
教你用 jVectorMap 製作屬於自己的旅行足跡
jVectorMap JVectorMap 是一個優秀的、相容性強的 jQuery 地圖外掛。 它可以工作在包括 IE6 在內的各款瀏覽器中,向量圖輸出,除官方提供各國地圖資料外,使用者可以使用資料轉換程式定製地圖資料。例如街道地圖、小區地圖等等。 JVectorMap 官方網站提供了很多相關文件和使用示例
cocos Creator 製作列表並新增監聽
需要的控制元件就是一個Scrollview,子項做成一個預製檔案(在場景中編輯好,然後拖入下方的資源目錄就可以生成一個預製檔案)。設定Scrollview的屬性,每一個屬性滑鼠放上去會有對應的中文,根據需要設定就可以了,content這裡將我們的一個layout拖進去,就
教你用Python製作微信好友背景牆
目錄: 0 引言 1 環境 2 程式碼實現 3 後記 0 引言 前段時間,微信朋友圈開始出現了一種晒照片新形式,微信好友牆,即在一張大圖片中展示出自己的所有微信好友的頭像。 效果如下圖,出於隱私考慮,這裡作了模糊處理。 是不是很炫,而且這還是獨一無二的,畢竟每個人的微信好友是不一樣的。本文就教大家用Pyt
幾個小步驟教你線上使用浪潮webblos做raid---簡單明了!
幾個小步驟教你線上使用浪潮webblos做raid 幾個小步驟教你線上使用浪潮webblos做raid 簡單明了教你線上使用浪潮webblos做raid,在這裏就不啰嗦了!直接進入正題---圖片表達!選擇configureation v….選擇新建 (new)選擇手動 (M
手把手教你用npm發布一個包,詳細教程
文件夾 模塊 .com png keyword tor 速度慢 index bsp 我們已經實現了路由的自動化構建,但是我們可以看到,一大串代碼懟在裏面。當然你也可以說,把它封裝在一個JS文件裏面,然後使用require(‘./autoRoute.js‘)給引入進來,那也行
手把手教你搭建一個加密貨幣交易模擬器,不用投錢就能玩
box NPU nec idp reat 監控 最簡 data- 自己 手把手教你搭建一個加密貨幣交易模擬器,不用投錢就能玩 大數據文摘,編譯:汪小七、黃文暢、小魚 我雖然不是交易員,但對加密貨幣的交易非常感興趣。然而,我不會在自己什麽都不清楚的時候就盲目投
教你使用HTML5原生對話框元素,輕松創建模態框組件
標記 select bootstrap hub api chrome 沒有 lin bsp HTML 5.2草案加入了新的dialog元素。但是是一種實驗技術。 以前,如果我們想要構建任何形式的模式對話框或對話框,我們需要有一個背景,一個關閉按鈕,將事件綁定在對話框中的方式
資深架構師教你如何使用elk+redis搭建nginx日誌分析平臺!
pat 好的 oat ace efi 開啟 cse embed VM elk+redis 搭建nginx日誌分析平臺 logstash,elasticsearch,kibana 怎麽進行nginx的日誌分析呢?首先,架構方面,nginx是有日誌文件的,它的每個請求的狀
從完全零基礎教你用Python開飯一款打飛機的遊戲!是個人就能學會
實現 裁剪 -i ext 想象 一點 換圖 結束 離開 默認圖片左上角為原點 (0,0)。 進群:125240963 即可獲取數十套PDF!要源碼也可以私信哦! 顯示窗口 如果我們這樣設定,當我們運行的時候,窗口會一閃而過,並不會出現我們想象的畫面。因為
好系統U盤啟動教你一招讓win10系統快的飛起!
程序 硬盤 下載 ews ftp nag images ESS win10系統 電腦系統用的時間長了,會發現越來越慢,最大的一方面原因是因為下載的軟件及產生的緩存垃圾,當然了,也會有電腦自身的程序和硬件性能的原因。如何讓win10的電腦操作系統快起來?下面來給大家說三種方法
手把手教你制作微信小程序,開源、免費、快速搞定
免費 list life 支付 直接 domain -i 方式 poster 最近做了個“羅孚傳車”的小程序 一時興起,做了一個小程序,將個人收集的同汽車相關的行業資訊和學習資料,分享到小程序中,既作為歷史資料保存,又提供給更多的人學習和了解,還能裝一下:) 掃描下方小程序
tomcat 遠程debug配置,教你遠程調試代碼,解決線上故障
控制 chang spa pub 分享 alt config server 服務器端 IDEA遠程DEBUG Tomcat很簡單,配置如下: 1.修改tomcat服務器配置 打開tomcat/bin/catalina.sh 在空白處添加如下參數 CATALI
一個故事教你看懂什麼是數字證書,它的原理是什麼?它的作用是什麼?
原創地址:http://www.cnblogs.com/JeffreySun/archive/2010/06/24/1627247.html 1、基礎知識 這部分內容主要解釋一些概念和術語,最好是先理解這部分
教你一招黑掉別人電腦,讓電腦關機
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
一個故事教你看懂什麼是數字證書,它的原理是什麼?它的作用是什麼?
轉載地址:https://www.cnblogs.com/franson-2016/p/5530671.html#4117166 1、基礎知識 這部分內容主要解釋一些概念和術語,最好是先理解這部分內容。 1.1、公鑰密碼體制(
獨家 | 手把手教你用Python進行Web抓取(附程式碼)
作為一名資料科學家,我在工作中所做的第一件事就是網路資料採集。使用程式碼從網站收集資料,當時對我來說是一個完全陌生的概念,但它是最合理、最容易獲取的資料來源之一。經過幾次嘗試,網路抓取已經成為我的第二天性,也是我幾乎每天使用的技能之一。 在本教程中,我將介紹一個簡單的例子,說明如何抓取一個網站,