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

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

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特效是不是會更酷呢？

相關推薦