教你使用Cocos Creator制作國旗頭像生成器，附源碼！

關注「編程小王子」公眾號回復【頭像生成器】獲得源碼！

下面我重點介紹一下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特效是不是會更酷呢？