大家对微信小游戏web端图片加密有没有兴趣

Creator 2.x
#1

今天刚实现了微信图片资源的加密，使用版本是cocos creator 2.2.2

#场景

top1.png2038×1482 257 KB

可以看到resources下的图片资源都是01的二进制文件了

#代码调用也比较简单

top2.png1568×1412 163 KB

#web端和微信小游戏端运行情况

top3.png2914×1940 1.07 MB

不过目前实现的功能还比较少，使用范围比较局限，不过至少可以图片资源可以加密了。。

目前只支持

* 加载Texture2d贴图
* 加载SpriteFrame
* 加载SpriteAtlas
* 加载Spine

目前文件加密是用java写的（老本行，比较熟）
加密和解密逻辑不想放出来，，因为被坏人们看到会。。。针对性破解攻击:confused:

目前使用起来还比较局限，比如资源只能是resources下的资源，必须使用代码load调用，不能使用cocos的拖拖拖。。。。（因为我比较菜，引擎源码不想改）

如果后期有精力可能会做成插件（菜，不会写插件），不过会把加密和解密方式做成接口，让大家自由发挥
毕竟一样的加密和解密算法，可能会被暴力破解吧。。。

目前考虑安全性问题，暂时不放出来

搭配js混淆obfuscator混淆插件，食用更香（主要是为了保护代码和解密算法）

介绍到此为止，如果有精力的话。我就做成插件放出来

PS：cocos creator加载spine文件的时候，对应的图集文件是需要指定一个可用图片的，但是我们的图片被替换成二进制文件了，所以我这里是吧图集文件指向的文件改成了empty.png,一个1x1像素的空图片文件

top4.png2036×1484 287 KB

5赞
【分享】Cocos Creator 一种「无侵入」资源加密方案
#2

厉害了，我的歌。

大力支持，很大兴趣。

期待越来越好用。。。。 :grinning:

#3 
请问下，能提供下思路吗？我这边一个项目，美术比较值钱，但是老板要求web端的图片要加密，目前找了一圈帖子，没什么思路，看到这里，感觉找到了希望，谢谢了！
#4

牛！学习学习

#5

思路就是将贴图弄成二进制bin文件，然后用cc.loader.loadRes,读取二进制信息
二进制信息拿到之后对其遍历或者指定部分二进制进行逆操作，得到源文件该有的二进制信息
然后再去进行初始化成Image对象，拿到贴图

#6

大牛，请教下，实现类似的加密功能，文件加密后变成二进制保存，然后加载的时候解密后使用，但是cc.loader.loadRes 提供的返回值object,里面的二进制数据怎么获取啊，我用object._nativeAsset都是字符串，而且还比实际的短，我想要的是二进制的buffer ，Uint8Array 然后进一步处理。

cc.loader.loadRes(“encrypted/xxx”, (err, object) => {
if (err) {
cc.log(“load error”);
cc.log(err);
}else{
}
}

使用cc.loader.load({ url: url, type: “binary”, }, (err, binData: Uint8Array)=> {
}
});
是可以成功的，但是微信里面又不能用。

现在的问题就是cc.loader.loadRes 怎么获取到二进制数据？感谢

#7 
cc.loader.loadRes(path, cc.BufferAsset, (err, res)=>{
    if(err){
        return;
    }
    let buffer = res._buffer;
})
#8

感谢大佬的神速回复，可以了，多谢多谢，

#9

强势插眼

#11

有兴趣啊，所以看到帖子，马上就mark一下，以后用得到！

#13

cc.loader.loadRes(rawPath, cc.BufferAsset, (err, res)=>{
if(err){
return;
}
let buffer = res._buffer;
let decodeImageData=Decode(buffer);

})

虚心请教下大佬，json类型的解决了，就是图片解密后的二进制数据decodeImageData ,如何继续使用 load 或者 loadRes载入成SpriteFrame，这里没有url啊，只是unit8Array，是否可以指点迷津？感谢。

你说的“得到源文件该有的二进制信息，然后再去进行初始化成Image对象，拿到贴图” 这个初始化是有其他的接口吗？

#14

很感兴趣！

#16

解决了，方法如下，剩下就是 audio 格式mp3/wav 类的不知道咋弄？ 引擎大佬给个思路呗

var imgElement = new Image();
imgElement.src = “”;//这里填流数据
var sprite = new cc.Texture2D();
sprite.initWithElement(imgElement);
sprite.handleLoadedTexture();
var spriteFrame = new cc.SpriteFrame(sprite);
iconSpr.spriteFrame = spriteFrame;//iconSpr是要设置图片的目标sprite

#17

这里要区分平台,web和原生端可以

let unit8:Unit8Array = xxxx;
let blob = new Blob([unit8], {'type': `image/png`});
let url = URL.createObjectURL(blob);
let img = new Image();
img.src = url;
img.onload = ()=>{
                let texture2d = new cc.Texture2D();
                texture2d.initWithElement(img);
       
               /////texture2d/////
               //得到贴图
}

微信,字节,oppo,uc要特殊一点

vivo再特殊一点

#18

感谢大佬指导，还是大佬的方法好用些。

#19

mark1111111111

#20

mark!

#21

拖界面的时候是不是不能再把图片拖进去了，因为是二进制的文件

#22

可以拖,我现在做成可拖动组件了

WechatIMG753.png1406×1516 155 KB

#23

要是能打包时候加密就好了，进入游戏loading，后端传密钥，进入游戏图片自动解密，密钥在小程序端用code换保证安全