CocosCreator图片处理：截图裁剪，保存到本地，从本地加载，远端图片转base64

• 截图裁剪

从相机导出的renderTexture中使用readPixels读取像素数据，通过像素数据创建spriteFrame可以展示到界面上。

this.rt = new RenderTexture();
this.rt.initialize({
    width: view.getVisibleSize().width,
    height: view.getVisibleSize().height,
})
this.camera.getComponent(Camera).targetTexture = this.rt;
this.scheduleOnce(()=>{
    console.log("下一帧开始-->")
    this.camera.active = false
    this._buffer = this.rt.readPixels(Math.round(worldPos.x - width / 2), Math.round(worldPos.y - height / 2), width, height);
    console.log(this._buffer)
})

let img = new ImageAsset();
img.reset({
    _data: this._buffer,
    width: width,
    height: height,
    format: Texture2D.PixelFormat.RGBA8888,
    _compressed: false
});
let texture = new Texture2D();
texture.image = img;
let sf = new SpriteFrame();
sf.texture = texture;
sf.packable = false;
this.showSprite!.getComponent(Sprite).spriteFrame = sf;
this.showSprite!.getComponent(Sprite).spriteFrame.flipUVY = true;
if (sys.isNative && (sys.os === sys.OS.IOS || sys.os === sys.OS.OSX)) {
    this.showSprite!.getComponent(Sprite).spriteFrame.flipUVY = false;
}
this.showSprite?.getComponent(UITransform)?.setContentSize(new Size(width, height));

---

• 保存到本地

在3.6.0版本及以前是不支持这个方法的，在下面的链接中官方提供了一个方法：

【CocosCreator 3.x 技术方案分享】第一期 - Creator 3.x - Cocos中文社区

目前 3.0.0 ~ 3.6.0 版本还不支持 jsb.saveImageData , 引擎将在 3.6.1 支持。

提供一个在 3.6.1 版本之前可以使用 jsb.saveImageData 的方案 https://gitee.com/zzf2019/engine-native/commit/4af67e64a1caeb951016a9920efb7ee46d479ae5 38 ，目前此方案仅支持在 android 和 ios 上将 imageData 保存为本地 png 文件。

---

• 从本地加载

引擎提供了loadRemote方法可以加载本地资源。

let filePath = jsb.fileUtils.getWritablePath() + 'render_to_sprite_image.png';
assetManager.loadRemote(filePath, (err, imageAsset)=> {
    if (err) {
         console.log("show image error")
    } else {
        console.log(`开始加载本地图片成功: ${filePath}`);
        const spriteFrame = new SpriteFrame();
        const texture = new Texture2D();
        texture.image = imageAsset;
        spriteFrame.texture = texture;
        this.copyNode.getComponent(Sprite).spriteFrame = spriteFrame;
        spriteFrame.packable = false;
        spriteFrame.flipUVY = true;
        if (sys.isNative && (sys.os === sys.OS.IOS || sys.os === sys.OS.OSX)) {
            spriteFrame.flipUVY = false;
        }
    }
});

---

• 远端图片转base64

本地图片转base64自不必说，直接读数据就行了。

jsb.fileUtils.getDataFromFile()

远端图片可以使用loadAny方法，获取图片的二进制数据，然后转为base64数据：

static buffer2Base64(arrayBuffer) {
    let base64 = '';
    const encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

    const bytes = new Uint8Array(arrayBuffer);
    const byteLen = bytes.byteLength;
    const byteRem = byteLen % 3;
    const mainLength = byteLen - byteRem;

    let byte1, byte2, byte3, byte4, tmp;

    for (let i = 0; i < mainLength; i += 3) {
        tmp = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
        byte1 = (tmp & 16515072) >> 18;
        byte2 = (tmp & 258048) >> 12;
        byte3 = (tmp & 4032) >> 6;
        byte4 = tmp & 63;
        base64 += encodings[byte1] + encodings[byte2] + encodings[byte3] + encodings[byte4];
    }

    if (byteRem === 1) {
        tmp = bytes[mainLength];
        byte1 = (tmp & 252) >> 2;
        byte2 = (tmp & 3) << 4;
        base64 += `${encodings[byte1]}${encodings[byte2]}==`;
    } else if (byteRem === 2) {
        tmp = (bytes[mainLength] << 8) | bytes[mainLength + 1];
        byte1 = (tmp & 64512) >> 10;
        byte2 = (tmp & 1008) >> 4;
        byte3 = (tmp & 15) << 2;
        base64 += `${encodings[byte1]}${encodings[byte2]}${encodings[byte3]}=`;
    }
    console.log(base64)
    return base64
}

let filePath = "https:/test.png"
assetManager.loadAny({url: filePath, ext: '.bin' }, (err, assets) => {
    console.log(`data:image/png;base64,${this.buffer2Base64(assets)}`)
});

 如果觉得有帮助请给我点赞并收藏哦~您的支持是我最大的鼓励~