如何将图片的base64数据转换成 ImageAsset 格式呢

var img = new ImageAsset();
let baseData = ‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQxNTgwRDgwRTcwMDExRUM4NEFGODFERkUyNTBCMjc3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQxNTgwRDgxRTcwMDExRUM4NEFGODFERkUyNTBCMjc3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDE1ODBEN0VFNzAwMTFFQzg0QUY4MURGRTI1MEIyNzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDE1ODBEN0ZFNzAwMTFFQzg0QUY4MURGRTI1MEIyNzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6YqYrGAADOfklEQVR42qx9B6BlVXX2t/c59/U2b3ov9N4RgSBEkCIiCGjQWKLYFQWjxIoYjbH32BMTTeIfEaKIJhYsVJUinaHPMOVNf73ce8/Z/+5n7X3OffMmyeD13nfLqXvt9X1rfWtt9u7TL0PVv1wIgDGs6ZyPw2s96JHvbZeP+6Z3Y3XSBs5T1CCwO2sgk+8vTzvQpn4nH5uyGYzKR798b3eeY2dzBn0z4sbRfPK0nq6evuUdfViUNbEuraGXJegSud4WE4wcgbDPzL4W9nXVP9biN1WvUbEPVHy3eE+oY6v8nIXHxeRrdQ7umX5XXksI0eJ4RIt9u9+h+rPSedPv72W7sx5Hq2uJFtex1fHNdi+qv6NeZfIcmvLVlHweFRmeaMxgO0uxaWYM+dju0XXTk7c/OH/puQvl+BrkCcayOt516z8vBUsbcjuNaOMN7Nu/4Psp/g//MfuYkCe7Qw6G0fGxx0Rbsv8JHf3sxE6B1axPWpA0J3nSSLh8PRON+9hA7M1mYpabwqI/RfmGixZjINiUmRDKg8P+LUA+n2V8MDtLBKcjP8xZ5em1Pg83U80yL1Rdi3wv47jlQWPv13ef/83xvsX3TojgnhxWS83rzi6gq69vg8jP6cqEeGBqRKSju5/YMW/xgZ9/3hu2HtTWhnN//sWl4G3u3NRgr0UDf28GU6PG8n9qIJPysXsM527jEz85tLOPn9/OMOjussjJDJrLl8zOstEcQmdgZ3Eg32VkBhLRoLPf9RO4n9lbTPp0fLjBL6JZmIUbYCjuX7UDYMUxCjKrl/YXTS2Vn7G9z8yiwnPMdUwL1tohsej67nXbZGDH1y36LQPXXrm8bxbeV3dOWWZPUU0ADazmDKtTjpf19LPd3X0H3CiH0+OTI/lpTzxx0Q1nXfFjLo/jxb/88krwWpWh7ItnqaX/W48B7TGAoXFx3Lba5B/O7evjrxX9xQygD1GENzEYZfY+FxZSnmjo+/HgFi3mRTGLl2ct0FvVNqObK1qhBedk3BdYxfZb7S/+jG60pY2I2Z2BaIEIZ7s2osV3xCxIdjaIJVqBAtEadbEyci1+LooxJCdc9bGagF+dyle9A/yuQ0/+0cNTI/lZzzx08qfPeP3vB+Q3Lv/tt1fOYcZoaSz8f2oc6od1+RiWO98xPZYd01e76wNtbfy4fEqPIiGMWeT0vkcDMBgPIkQ7/nNRcb9E9W1paTPxQBYVg1G0RtL+OMh9bXUM9BiFiM5vtnMU5eMXs4y7qu+KVh+22E/VvRCi4jyic4oPRIiKeyrK50mvv2hxfsE+RPnE6b782MrNB8fn03h/ewdnh556566p0UyNze+f8aZn0axTa6vt5fG/NxC1qz3y8cjYyKPLk5r4u+4Bfnw2qQ9X2XVeGg8ivAkVY7N6vIb/L8K5hLwv/Kci2lfxWkTvieA9UTHYRMU+Kwdli/2ixf5FaYvhuWCWYxHRGWCWaxnuT7Q89vI8He+r/Lr6+oiK+xPfp1bXRszxPFB5H3M79tQ7J8ix+LGeeXx5kort25565Ktnvn0rGlM75cjtiLhGrYJ3BIaS7qvXaMoD2CMPZFt9PH9bbx9bKN8x1hxjBFYBl8SsURRR8t1l8iACsiwqyG6IL3LLSVoS4tlwRAuIEHyXQhnPPQwPMR+xMjy058ro9gTlW/RaVR2AaE18hYh4E8F3wWfUoJmO1bWEIlXnXQY/s/hxtpeIImuBBarHShhVDIMbOSvG6mVybO5YvObgL02N5l856218Z33y6Wtu/9e18jfTFaS8ZqFWg/7N98VrqK3OH+MXNUVTXNvezRZKHKi8W6Y9nCjcsfubWj+zp+XdPJllhCgGjN+WnRvo34LMOPYPwULIVMCE4g/BwhmxvC3i9um+GMLjYMVnxTna9xiBVUwQaEG+z4rzchwY7joxCi+KYwI9HlGGNu543cBxduBnZfqa0XOkcIVe5/i6iOJ8yGcoziL6jEA5ek0p7BRk7idwPLzn4e8LmCjItiv+s7/J9OQILGQZPtLdy5p5Ji5c/8eX3PD8K56WmKyjhXOIoVaNz9U46vL/nxgZ/fCqwa7rr+AqmtDU+Y8qvC9aYSchyliZGhWq8LFoOdkLzIJ9UX0cYjZGL/YSDZ2Nd7QiQxXHSrG0qDjY2eZSOvHE7+sZVLQgKqI6nSTQEhO2Dn4Exlv+DFXcMtqREHMkkKLF91th8+gYM2HG6jsSjg1H/vkPG0//8YN3nnXV0/IbvdZI0hZh3tqcOAizPue3Y8NfPquv+5rzRV3PHJl1yjG2b4Uh6QWa7bqICs6Cllh5lndECy4RkWOxlzD+Xs9rH465ZQBgL7/ZO29oxSSquFdEvPdiS7NPDK2NWVRwRzHr9+Zyf1tfbyFa2pYlAcAFrIED1x7/kSeeuevLvzrrnQ9Ly5nNSGp79SDGOBj+ODz8lRf19L71qOaExvQZKqIZwcGWL4XDukKIEomDc9aiTMCrSbYofVd4fFp8l0UYuIpYokSgw9eoINdVt1HYfYfXInT7COCCqBxspf1brCEqSXQ4OOi1LfO4VgMuPFsQpI/KIEZM0AnFFuXgTImoC1RSdhFdM1QEU+LtiYo7Qr9fjCmmjSSX3uTofBzHrDnmrUNP3fGlzz/vDQ/LL/QRI0nnHMVynGNmdPID5w/0v+WwxhgyxjW28wk7IVrGFgMjoYCX0btKboImkO4Ks7JvJeBWlGK+ItpPgd3jz4SILm8cixUV8WW3LRHFW+Lzd+eA4jiEI9wCAUcgZC0mT+Go90nM4nqLGOyzFvHXeEoQYVzW43ni4QtegOr7VxXjFkWQIjDfeBtVQ1tUx92FQIu4pqiO24vomrvjYMVnKtKVCY7DmmM4cu1z3rb66T9d87YTL7pPfrlTPjoqjKTagxjOIbB6HM85ur/nb49ojKMpjSOnBKkK+wtROd7QIo5ewq0+UCFajhuI6lh7KV4/S2y/MnYvREBCW4WkIcIgRBzbR2ij5HjI4IaIZn5UDoxiHmk9O1ede2nMiL3kjsL5p5Q3Acr5n9ZjICbo0evSdUGJwMfXUohqHilE63tdurZ2Yso15OI4IhtH17pjP3zVw7ee+o7jLnhYTkJdkSfRhsKrIgEzoolxnqBzweCdZwtKxsWsvFS0IHVilu9WYmAxtySgaM3pWsI/zBJQFHNMVscOPSc3M6fkVVRZa/mGo4WBz7ZvsddYgmid8KyaNGb7DVok/fZ2/fbC7/blKwItHNIcNiAqnJ6KvJ4tTeVnx11wy3gibaExs9vC0dBAGIr/uH2MyEdfs5m9Na0Zt1SJkctYvSp1V3oWZUwp4iRTKYRXzUmqUkyiYpvF7E1D0aIyvdeKiwRH6CBXzop0bkVaLoQqrSJ1ohRWLeCPiAgy+SxOz5VmZVbJMcr3DSVOASFmmcTiRKIoXT1RkfgscxJRulfhMYmKeykqwGN0JKIMMBGMO/NuZpOLb63VML8xk736OZc8C5HVSH5QP3iNpXCPVD5mpIksnRY//9veJVyl6BsCIfELzJHg4giqVN41r6Vh4e2JciMFFwl9KR1AJfkCIYp0YBUXTRCdj9BjW9ABGmy7IrZoX+Z5xfFSjyE3LNzGrSBTUK1mjkK7mRviaIyMlTxMkAPKDT4I8yvFdRWMYO7gmiLIqcT4SIgy9nf5Gce54vtMr7GIXovofnm6H+U/gjEi4m2KWUK9ZRdIuaRgZT4qIpzodqszglkdHxpYxk/fvuHnbzv+QgW1+kgkK02nsim/I8UxdskBfMq8JWf1yLtXjxOoNtnk7wNC7WFJ5yaiPDAxGiaq4dhs2x’;
// img.reset();
// TODO
// 这里该怎么处理
//
img.onLoaded = () => {
var texture = new Texture2D();
texture.image = img;
var newframe = new SpriteFrame();
newframe.texture = texture;
this.sp_test.spriteFrame = newframe;
};

有没有大佬再Creator3.x 处理过这部分数据呢,base64数据是安卓传过来的数据。想把这个图片数据做展示到游戏中

    // let texture2D = new cc.Texture2D();
    // texture2D.initWithElement(img);

    // let spriteFrame = new cc.SpriteFrame();
    // spriteFrame.setTexture(texture2D);

    // let node = new cc.Node();
    // let sprite = node.addComponent(cc.Sprite);
    // sprite.spriteFrame = spriteFrame;

你这个是2.x上可以用的,3.x没有initWithElement了

var _img = new Image();
_ img.onload = () => {
var texture = new Texture2D();
// texture.image = img;
texture.reset({
width: _img.width,
height: _img.height,
});
texture.uploadData(_img, 0, 0);

  var newframe = new SpriteFrame();
  newframe.texture = texture;
  this.sp_test.spriteFrame = newframe;
  }
 img.src = baseData;

431 (Request Header Fields Too Large) ,cocos报 这个错误是怎么回事?base64太长?

代码:
let img = new Image();

var _img = new Image();

                    _img.onload = () => {

                        var texture = new Texture2D();

                        // texture.image = img;

                        texture.reset({

                            width: _img.width,

                            height: _img.height,

                        });

                        texture.uploadData(_img, 0, 0);

                        var newframe = new SpriteFrame();

                        newframe.texture = texture;

                        find("Canvas/bg1").getComponent(Sprite).spriteFrame = newframe;

                    }

                    img.src = dizhi;
1赞

https://blog.csdn.net/enthan809882/article/details/115796151
你尝试使用一张小的图片试试,如果可以那就这个问题喽

// let img = new Image();

                    // var _img = new Image();

                    // _img.onload = () => {

                    //     var texture = new Texture2D();

                    //     // texture.image = img;

                    //     texture.reset({

                    //         width: _img.width,

                    //         height: _img.height,

                    //     });

                    //     texture.uploadData(_img, 0, 0);

                    //     var newframe = new SpriteFrame();

                    //     newframe.texture = texture;

                    //     this.bj.spriteFrame = newframe;

                    // }

                    // img.src = t;

替换后,没有报错,也没有任何的图片被替换反应。

> 
> public setSprFrameByBase64Data(spr: Sprite, base64: string) {
>     var img = new Image();
>     console.log(base64);
>     img.onload = function () {
>         var texture = new Texture2D();
>         texture.reset({
>             width: img.width,
>             height: img.height,
>         });
>         texture.uploadData(img, 0, 0);
>         var newframe = new SpriteFrame();
>         newframe.texture = texture;
>         if (spr) spr.spriteFrame = newframe;
>     }
>     img.onerror = function (err) {
>         console.warn("------合成报错-----", err)
>     }
>     if ((<any>base64).startsWith !== undefined && (<any>base64).startsWith("data:image")) {
>         img.src = base64;
>     } else {
>         img.src = "data:image/png;base64," + base64;
>     }
> }

试试这个,我这边是没有问题的

3赞

我使用了你这里的diamante,在客户端不能用,onload根本不调用

你确定下自己的base64格式对不,是全的不