creator项目里的图片转base64

Creator 2.x
#1
  • Creator 版本：2.0.7

最近研究Facebook，它的分享接口需要传入一个base64的图片，想知道如何将项目中的图片转换成base64位，在网上看的一下方法拿来用，传入的图片地址总是不对。

2赞
#2

你需要使用web原生方法，

cc.loader.load(
				path,

				function(err, image) {
					if (err) {
						console.log(err);
						callback.call(caller, err, null);
						return;
					}
					let canvas = document.createElement("canvas");
					let ctx = canvas.getContext("2d");
					var img = image.getHtmlElementObj();
					canvas.width = image.width;
					canvas.height = image.height;
					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
					FBInstant.updateAsync({
						action: "CUSTOM", //   cta: "Join The Fight",
						template: "play_turn",
						image: canvas.toDataURL("image/png"),
#3

mark

#4 
    //从本地读取文件到unit8Array
    let imageData = jsb.fileUtils.getDataFromFile(vUrl);
    let dataArray = this._arrayBufferToBase64(imageData);

_arrayBufferToBase64(bytes) {
    var base64 = '';
    var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    var byteLength = bytes.byteLength;
    var byteRemainder = byteLength % 3;
    var mainLength = byteLength - byteRemainder;
    var a, b, c, d;
    var chunk;
    // Main loop deals with bytes in chunks of 3
    for (var i = 0; i < mainLength; i = i + 3) {
        // Combine the three bytes into a single integer
        chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
        // Use bitmasks to extract 6-bit segments from the triplet
        a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
        b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
        c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
        d = chunk & 63; // 63 = 2^6 - 1
        // Convert the raw binary segments to the appropriate ASCII encoding
        base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
    }
    // Deal with the remaining bytes and padding
    if (byteRemainder == 1) {
        chunk = bytes[mainLength];
        a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2;
        // Set the 4 least significant bits to zero
        b = (chunk & 3) << 4 // 3 = 2^2 - 1;
        base64 += encodings[a] + encodings[b] + '==';
    }
    else if (byteRemainder == 2) {
        chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
        a = (chunk & 16128) >> 8 // 16128 = (2^6 - 1) << 8;
        b = (chunk & 1008) >> 4 // 1008 = (2^6 - 1) << 4;
        // Set the 2 least significant bits to zero
        c = (chunk & 15) << 2 // 15 = 2^4 - 1;
        base64 += encodings[a] + encodings[b] + encodings[c] + '=';
    }
    // return "data:image/jpeg;base64," + base64;
    return base64;
},
4赞
#5

嗅嗅，此贴可以嘘嘘做个base64的记号:grinning:

#6

题主后来解决了吗？刚好在做，请问可以把转换的方法发给我吗？

#7

我最初的解决方式是将分享时需要用到的图片在网上事先转成base64位，然后写到项目中去。今天写了一个动态加载图片转换的方法。

image.png701×489 28.1 KB

1赞
cocos creator 3.x 图片转base64以及base64转图片
#8

:cherry_blossom:是的，这么做确实可以得到！

#9

mark

#10

mark

#11

creator项目里的图片转base64

#12

mark.

#13

mark 感谢分享

#14

mark 感谢分享

#15

大佬，我用这个方法img.src = ‘res/raw-assets/’ + url这样拼接，获取不到图片
谷歌浏览器显示404

image
image748×586 47.6 KB

这是我的目录
image

#16

“res/raw-assets/”+url这种路径是打包成微信小游戏后的资源路径，你在浏览器运行时，可以参考上面的第一个回复的做法。

#17

解决啦，感谢大佬