CocosCreator of KUOKUO take you to engage in reflection -jsb read picture albums

Summary

CocosCreator packaged using native applications, we can through the static method call engine packaged Java reflection mechanism, enabling prompt, albums, skip payment and other functions. The content is read using the picture album jsb.

text

Look at the effect

Imprint

CocosCreator to version 2.2.1.
AndroidStudio to version 3.5.2.
JDK version 13. (Specifically: 13.0.1)
NDK for the 20 version. (Specifically: 20.1.5948944)
SDK API 23 is installed.
Simulator AVD. (Can be installed in android studio)

Layout and script

In CocosCreator good layout of a button, a text display and elves for a picture, write a method in the script and bound to a button, as shown.

script

const UPNG = require("upng-js")
const UJPG = require("jpeg-js")

cc.Class({
    extends: cc.Component,

    properties: {
        label: cc.Label,
        sprite: cc.Sprite
    },

    onLoad () {
        cc.showImg = (path, w, h) => {
            // 用于显示信息
            this.label.string = `宽：${w}高：${h}路径：${path}`
            // 给数据传递留点时间，100ms即可
            setTimeout (() => {
                const width = parseInt(w)
                const height = parseInt(h)
                const data = jsb.fileUtils.getDataFromFile(path)
                let buffer = null
                // 这里简单处理了，应该判断末尾
                if (path.includes("png")) {
                    const img = UPNG.decode(data)
                    buffer = UPNG.toRGBA8(img)[0]
                } else {
                    buffer = UJPG.decode(data).data
                }
                const array = new Uint8Array(buffer)
                const tex = new cc.Texture2D()
                tex.initWithData(array, cc.Texture2D.PixelFormat.RGBA8888, width, height)
                this.sprite.spriteFrame = new cc.SpriteFrame(tex)
            }, 100)
        }
    },

    getImgData () {
        const className = "org/cocos2dx/javascript/AppActivity"
        jsb.reflection.callStaticMethod(className, "getImgData", "()V")
    }

});

Which is bound to getImgData button method. upng-js libraries and library jpeg-js npm direct download, an instruction is given:

npm install upng-js
npm install jpeg-js

Both libraries good package method, we can directly use, because the data is not the pixel information jsb.fileUtils.getDataFromFile (path) returns, but after formatting, you need to decode the two is a jpg format decoding library, one is png format decoding library.

Java wording

After building Java files found "/app/src/org/cocos2dx/javascript/AppActivity.java", and then we add the corresponding static method on how to AndroidStudio :( tune from the album, a lot of online, do not explain the.)

public static void getImgData () {
    Intent intent_album = new Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    app.startActivityForResult(intent_album, 2);
}

This completes the tune from the album. And then we have to scroll down to find the code below:

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        // ......
    }

The above method will call back after you choose a good picture, we can handle data returned! All code is as follows:

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    SDKWrapper.getInstance().onActivityResult(requestCode, resultCode, data);
    if (data != null) {
        // 得到图片的全路径写法，可以copy
        Uri uri = data.getData();
        String[] filePathColumns = { MediaStore.Images.Media.DATA };
        Cursor c = getContentResolver().query(uri, filePathColumns, null, null, null);
        c.moveToFirst();
        int columnIndex = c.getColumnIndex(filePathColumns[0]);
        String imagePath = c.getString(columnIndex);
        // 获取后显示下图片路径
        Toast.makeText(app, imagePath, Toast.LENGTH_LONG).show();
        // 根据路径读取图片来获取下图片宽高
        Bitmap srcBmp = BitmapFactory.decodeFile(imagePath);
        int w = srcBmp.getWidth();
        int h = srcBmp.getHeight();
        // 拼接执行语句 cc.showImg("imagePath", "w", "h")
        StringBuilder evalString = new StringBuilder();
        evalString.append("cc.showImg(\"");
        evalString.append(imagePath);
        evalString.append("\",\"");
        evalString.append(w);
        evalString.append("\",\"");
        evalString.append(h);
        evalString.append("\")");
        app.runOnGLThread(new Runnable() {
            @Override
            public void run() {
                Cocos2dxJavascriptJavaBridge.evalString(evalString.toString());
            }
        });
    }
}

需要注意的是，在执行 Cocos2dxJavascriptJavaBridge.evalString 时要在 GL 线程中，而且其中变量要用 “\”” 这种写法包上。

权限获取

在高版本的安卓机器上现在都是动态的权限获取，我们这个实现要求存储权限（读写），我们要先在 AndroidManifest.xml 加入两条权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

然后在代码中，动态获取一下，我写在了初始化中，如图：

这样如果开始没权限，会弹出授权选项。（闪退就是没权限，再不图片过大！）