怎样加载base64的图片？

Creator 3.x
#1

因为没有3d的label,所以我想通过canvas生成输出base64的文字图片，然后场景中通过base64加载图片，在creator中可以通过以下方式加载，但在creator3d中没有对应的方法，我应该怎样做。
let strImg = “data:image/jpeg;base64,” + strQR;
let img = new Image();
img.src = strImg
let texture = new cc.Texture2D();
texture.initWithElement(img);
texture.handleLoadedTexture();
this.aSprite.spriteFrame = new cc.SpriteFrame(texture);

1赞
#2

自己顶顶:sob:

#3

image.png1608×208 41.2 KB

你这个问题提的让我想了半天，最后一拍大腿想起来canvas可以直接扔到Texture2D里渲染的。这个变量名是creator2d里用的renderTexture，懒得改了。

1赞
#4

const img = new Image();
img.src =
“data:image/png;base64,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”;
const tex = new Texture2D();

img.onload = function () {
  tex.reset({
    width: img.width,
    height: img.height,
  });
  tex.uploadData(img, 0, 0);
  tex.loaded = true;
  const sp = new SpriteFrame();
  sp.texture = tex;
  self.sp.spriteFrame = sp;
};
3赞
#5

感谢感谢。

#6

请教下：我使用了你这个方法，但是又报错，图片没加载出来。

431：  Request Header Fields Too Large

读取的data数据也没有 “data:image/png;base64, 只有后面的字节。

#7

请教下，这个方法是不是只能在web端使用呢？