cocos 爬坑日記（5）之 web端的截圖本地保存

**

緣起

**
好久沒更了,前陣子實在太忙,一言難盡…然後前兩天在做一個遊戲的實時截圖功能,截圖找到了挺多參考的,但是就是找不到在web端本地保存的範本(原生倒是有jsb好辦,可web端用不了jsb啊)…上cocos官網是建議保存服務器－－嗯，我能理解大佬們的建議是好的，可是我現在需求是這樣子，爲之奈何？
話不多說，上乾貨唄．

１．截圖
找了挺多方式,最後決定暫時先用canvas 的方式,直接在canvas上面拿base64的圖片信息.
代碼如下:

		webGetShot() {
        return new Promise<string>((resolve, reject) => {
            let func = () => {
                cc.director.off(cc.Director.EVENT_AFTER_DRAW, func);
                let canvas: HTMLCanvasElement = document.getElementById("GameCanvas");
                let base64 = canvas.toDataURL();
                resolve(base64);
            };
            cc.director.on(cc.Director.EVENT_AFTER_DRAW, func);
        });
    }

2.保存
其實保存很簡單,拿到的base64本身就可以用字符串的方式直接保存(就是有點大,所以大佬們不建議這麼做…至於我嘛,23333,先搞定需求,然後再優化!)

async save()
{
	let KEY = 'KEY_PICTURE';
	let data = await this.webGetShot();//*劃重點了,異步處理一定要記得...不然會是一個黑塊,因爲沒數據嘛*
	cc.sys.localStorage.setItem(KEY,data);
}

3.取出,貼圖

其實也不難,就是弄個 texture2d 把 base64轉換成 spiteFrame然後直接複製就好...嗯.上代碼:

	readSprite(base64Data,callBack?:Function)
    {
        var img = new Image();
        img.src = base64Data ;
         img.onload = ()=> {
            var texture = new cc.Texture2D();
            texture.width = 720;
            texture.height = 1334;
            texture.initWithElement(img);
            texture.handleLoadedTexture();
            this.filePic.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(texture);//filePic就是你的圖片節點啦...拿到組件賦值就可以了
            callBack&&callBack();
        }
    }
	
	readByKey(key:string)
	{
		let data = cc.sys.localStorage.getItem(key);
		this.readSprite(data,()=>{
			console.log('成功了');
		})
	}

總結
整理起來挺簡單的,主要有兩個方面需要注意:1.少量用就好,官方似乎也不提倡這種做法,看自己需求吧,因爲確實保存起來文件挺大的(一張圖片就1M+的空間,自己算唄);2.用的texture2d …別用renderTexture去了,哈哈哈,在下幫你踩過這個坑了~ ~[痛並快樂着]
看官老爺們,有緣再會!

啊,對了,忘了參考的大佬們的鏈接了:
1.截圖的傳送門
2.官方的範例傳送門(弱弱吐槽一句…官方案例照抄會出bug,告訴你api過時了…相信會慢慢改進的)