creator截屏儲存到手機相冊功能

creator截屏儲存到手機相冊功能

流程：點選按鈕——截屏——儲存圖檔到相冊

1、js部分：

截圖代碼：

/**
     * @name: 截屏并儲存圖檔
     * @param {cc.Node} parentNode: 目前節點
     */    
 saveScreen (parentNode) {
        let node = new cc.Node();
        node.parent = parentNode;
        let cam = node.addComponent(cc.Camera);
        // 設定你想要的截圖内容的 cullingMask
        cam.cullingMask = 0xffffffff;
    
        // 建立一個 RenderTexture，并且設定 camera 的 targetTexture 為建立的 RenderTexture，這樣camera的内容将會渲染到建立的 RenderTexture 中。
        let texture = new cc.RenderTexture();
        this.texture = texture ;
        let gl = cc.game._renderContext;
    
        // 如果截圖内容中不包含 Mask 元件，可以不用傳遞第三個參數
        texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height, gl.STENCIL_INDEX8);
        cam.targetTexture = texture;

        // 渲染一次錄影機，即更新一次内容到 RenderTexture 中
        cam.render();

        // 這樣我們就能從 RenderTexture 中擷取到資料了
        let data = texture.readPixels();

        let w = texture.width;
        let h = texture.height;
        let fileName = 'render_to_sprite_image.png';

        if (CC_JSB) {  //原生平台
            //翻轉圖檔
            let picData = new Uint8Array(w * h * 4);
            let rowBytes = w * 4;
            for (let row = 0; row < h; row++) {
                let srow = h - 1 - row;
                let start = srow * w * 4;
                let reStart = row * w * 4;
                // save the piexls data
                for (let i = 0; i < rowBytes; i++) {
                    picData[reStart + i] = data[start + i];
                }
            }    

            let path = jsb.fileUtils.getWritablePath() +  fileName;
            let success = jsb.saveImageData(picData, w, h, path)
            if (success) {
                let args = {};
                args["path"] = path;
                args["filename"] = fileName;
                let json = JSON.stringify(args);
                let fun = function(str){
                    if(str){
                        let actCallback = function(){
                            GameCache.hall.appendTip("截圖已儲存到相冊");
                        }
                        this.captureAction(picData, w, h, actCallback)
                    }
                };

                if(cc.sys.os == cc.sys.OS_ANDROID){
                    return jsb.reflection.callStaticMethod("com/rx/market/core/SaveImgModule", 
                    "requestChannel", 
                    "(Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;)Ljava/lang/String;", 
                    json, fun);
                }
                else if(cc.sys.os == cc.sys.OS_IOS){
                    //暫時隻做了android的
                }
            }
            else{
                //提示截圖失敗
            }
        }
        else{
            if (!this._canvas) {
                this._canvas = document.createElement('canvas');
                this._canvas.width = w;
                this._canvas.height = h;
            }
            let ctx = this._canvas.getContext('2d');
            cam.render();
            let picData = texture.readPixels();
            // write the render data
            let rowBytes = w * 4; 
            for (let row = 0; row < h; row++) {
                let srow = h - 1 - row;
                let imageData = ctx.createImageData(w, 1);
                let start = srow * w * 4;
                for (let i = 0; i < rowBytes; i++) {
                    imageData.data[i] = picData[start + i];
                }
     
                ctx.putImageData(imageData, 0, row);
            }

            //儲存圖檔
            let dataImg = this._canvas.toDataURL("image/png");
            let save_link = document.createElement('a');
            save_link.href = dataImg;
            save_link.download = fileName;
    
            let event = document.createEvent('MouseEvents');
            event.initEvent("click", true, false);
            save_link.dispatchEvent(event);
            GameCache.hall.appendTip("截圖已儲存");
        }
    },
           

截屏動畫代碼：

/**
 * @name:  播一個截屏動畫
 * @param {Array} picData：Uint8Array圖像資料
 * @param {Number} width: 寬
 * @param {Number} height: 高
 * @param {Function} actCallback: 回調
 */
captureAction(picData, width, height, actCallback) {
    let texture = new cc.Texture2D();
    texture.initWithData(picData, cc.Texture2D.RGBA8888, width, height);
    let spriteFrame = new cc.SpriteFrame();
    spriteFrame.setTexture(texture);
    let tempNode = new cc.Node();
    let sprite = tempNode.addComponent(cc.Sprite);
    sprite.spriteFrame = spriteFrame;
    tempNode.zIndex = cc.macro.MAX_ZINDEX;
    tempNode.parent = cc.director.getScene();
    tempNode.x = cc.winSize.width / 2;
    tempNode.y = cc.winSize.height / 2;
    let scaleAction = cc.scaleTo(0.5, 0.2);
    let targetPos = cc.v2(tempNode.width*0.2/2 + 20, tempNode.height*0.2/2 + 20);
    let moveAction = cc.moveTo(0.5, targetPos);
    let spawn = cc.spawn(scaleAction, moveAction);
    let finished = cc.callFunc(() => {
        tempNode.destroy();
        if(actCallback){
            actCallback();
        }
    })
    let action = cc.sequence(spawn, cc.delayTime(0.3), finished);
    tempNode.runAction(action);
},
           

2、android部分 ：

建立一個SaveImgModule.java檔案，放在proj.android-studio\src\com\rx\market\core

目錄下

代碼如下：

package com.rx.market.core;

import android.content.Intent;
import android.net.Uri;
import android.provider.MediaStore;
import android.util.Log;

import com.rx.market.base.Method;
import com.rx.market.base.Module;
import com.rx.market.export.ChannelExport;

import org.json.JSONException;
import org.json.JSONObject;

import java.io.FileNotFoundException;

/**
 * Tools for handler picture
 * 
 * @author Ryan.Tang
 * 
 */
public final class SaveImgModule extends Module {

	private static SaveImgModule _saveImgModule = null;

	public static SaveImgModule getInstance() {
		if (_saveImgModule == null) {
			synchronized (SaveImgModule.class) {
				if (_saveImgModule == null) {
					_saveImgModule = new SaveImgModule();
				}
			}
		}
		return _saveImgModule;
	}

	public SaveImgModule() {
		super("saveImgModule");
		Register("saveImgToSystemGallery",new saveImgToSystemGallery());
	}

	public class saveImgToSystemGallery implements Method {
		//儲存圖檔到系統相冊
		@Override
		public String Execute(String args, String callBack) {
			String bRes = "save fail!!!";
			JSONObject json;
			// 檔案插入系統圖庫
			try
			{
				json = new JSONObject(args);
				String path = json.getString("path");
				String filename = json.getString("filename");
				MediaStore.Images.Media.insertImage(activity.getContentResolver(), path, filename, null);
				// 最後通知圖庫更新
				activity.sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, Uri.parse("file://" + path)));
				bRes = "save success!!!";
				if(callBack != "") {
					ChannelExport.getInstance().executeAyncMethod(callBack, "save success");
				}
			}
			catch (FileNotFoundException | JSONException e)
			{
				e.printStackTrace();
			}
			return bRes;
		}
	}
}
           

最後加一個按鈕，點選調用saveScreen(this.node)；方法即可。