获取Cocos图片

Posted 2021-12-04 lfdanding

最近在做录制回放的项目，录制回放中的校验是可以通过图片比对进行校验，所以需要获取Cocos中的图片完成接入和适配。参考了网上大多数文章，主要是通过截图方案实现的，代码如下所示：

var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var imageData = canvas.toDataURL('image/png');
canvas = null;

通过这个方式在web上是可以的，但是在mobile上就失效了。这时候另一个思路就是在获取到url以后，通过图片读取的方式获取图片数据，如下所示：

var imageData = jsb.fileUtils.getDataFromFile(url);
var dataArray = this.imageToBase64(imageData);

经验证，该方法同样可以获取到图片，只是性能上会有所损失。

参考文章

1、https://forum.cocos.org/t/texture/59377/31
2、https://cloud.tencent.com/developer/article/1611798
3、https://cloud.tencent.com/developer/article/1865667
4、https://blog.csdn.net/wwj256/article/details/114316997
5、https://discuss.cocos2d-x.org/t/converting-sprite-to-base64-data-url/44017
6、https://blog.csdn.net/lys_lingfeng/article/details/102863496