1. 程式人生 > >教你使用Cocos Creator製作國旗頭像生成器,附原始碼!

教你使用Cocos Creator製作國旗頭像生成器,附原始碼!

關注「程式設計小王子」公眾號回覆【頭像生成器】獲得原始碼!

下面我重點介紹一下Cocos Creator H5頭像生成的實現方法:

file

  1. 獲取手機相簿圖片
  2. 在 Cocos Creator 中載入相簿圖片
  3. Cocos Creator 螢幕截圖
  4. 使用HMTL顯示截圖圖片
  5. 儲存圖片到相簿

獲取相簿圖片

要獲取手機相簿圖片,需要使用瀏覽器 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);     
		})
}
  1. 建立 img 標籤,將讀取到的圖片設定到 img.src 屬性
  2. 建立 cc.Texture2D 物件,載入 img 中的紋理
  3. 當 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抓取(程式碼)

作為一名資料科學家,我在工作中所做的第一件事就是網路資料採集。使用程式碼從網站收集資料,當時對我來說是一個完全陌生的概念,但它是最合理、最容易獲取的資料來源之一。經過幾次嘗試,網路抓取已經成為我的第二天性,也是我幾乎每天使用的技能之一。 在本教程中,我將介紹一個簡單的例子,說明如何抓取一個網站,