基础库 1.31.0 开始支持本方法，这是一个同步方法。

创建一个图片对象。

前提条件	无
业务背景	无
使用限制	无
注意事项	1. 图片的 src 可以接受网络地址，本地 ttfile:// 协议地址，base64 格式，以及 ArrayBuffer 格式的数据内容。 2. 通过该 API 直接创建图片显示的方法不需要配置图片白名单。 3. 在开放数据域中，通过该方法创建的图片只能显示与自己头像地址,即 tt.getUserInfo 返回的 avatarUrl 相同主机名的内容。 4. 如果开发者在开发时使用了引擎，部分引擎所实现图片渲染的能力可能需要先进行图片下载，如果不想配置过多的图片白名单，可以通过改写引擎的图片能力解决该问题，具体请参考代码示例。
相关教程	无

语法

tt.createImage()

参数说明

无

返回值

返回值为 object 类型，详细参数描述如下：

属性名	类型	说明	最低支持版本
src	string	图片的 URL，base64 内容，或者 ArrayBuffer 数据	1.31.0
width	number	图片的真实宽度	1.31.0
height	number	图片的真实高度	1.31.0
addEventListener	function	添加事件监听器	1.31.0
removeEventListener	function	移除事件监听器	1.31.0

addEventListener 类型说明

是一个回调函数，接收类型参数如下：

属性名	类型	说明	最低支持版本
type	string	load 或者 error	1.31.0
listener	function	图片加载完成后触发的回调函数	1.31.0

listener 参数说明

参数类型为 object 类型，属性如下

参数	参数类型	说明
target	object	加载成功为实际的图片信息，加载失败时返回无效的信息
type	string	回调函数的类型，load 表示加载成功，error 表示加载失败

加载完成时 target 的参数说明

参数	参数类型	说明
width	number	图片的真实宽度。
height	number	图片的真实高度。
data	string	图片的 buffer 信息。从基础库2.82.0版本开始不再支持本属性，不建议使用。
complete	boolean	图片的是否加载成功，true 为成功，false 为失败。从基础库2.82.0版本开始不再支持本属性，不建议使用，触发onload回调即代表图片加载成功。

错误码

errorCode	errMsg	errorType	说明	最低支持版本
999993	internal error	F	小游戏框架内部错误，有需要请创建工单咨询	1.31.0

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

【代码示例1】：结合 cocos 引擎的解决方案，cocos 3.x 版本可能不适配。

export const headImgExt = ".head";
/**  * 新版本的cocos加载头像的时候，需要先下载，但是在字节小游戏平台下，会有跨域的问题。这个方法需要在进入游戏后加载前调用
* 加载头像的用法:cc.assetManager.loadRemote(url,{ext:headImgExt},(err,texture)=>{});
* 所有不想下载直接使用的图像都可以加上{ext:headImgExt}来使用  */
export function registerHeadImgLoader() {
    cc.assetManager.downloader.register(headImgExt, (content, options, onComplete) => {
        onComplete(null, content);
    });
    cc.assetManager.parser.register(headImgExt, downloadDomImage);
    function createTexture(id, data, options, onComplete) {
        let out = null,
            err = null;
        try {
            out = new cc.Texture2D();
            out._uuid = id;
            out._nativeUrl = id;
            out._nativeAsset = data;
        } catch (e) {
            err = e;
        }
        onComplete && onComplete(err, out);
    } (cc.assetManager as any).factory.register(headImgExt, createTexture);
}
function downloadDomImage(url, options, onComplete) {
    const img = new Image();
    if (window.location.protocol !== 'file:') {
        img.crossOrigin = 'anonymous';
    }
    function loadCallback() {
        img.removeEventListener('load', loadCallback);
        img.removeEventListener('error', errorCallback);
        if (onComplete) {
            onComplete(null, img);
        }
    }
    function errorCallback() {
        img.removeEventListener('load', loadCallback);
        img.removeEventListener('error', errorCallback);
        if (onComplete) {
            onComplete(new Error(url));
        }
    }
    img.addEventListener('load', loadCallback);
    img.addEventListener('error', errorCallback);
    img.src = url;
    return img;
}

【代码示例 2】：结合 Laya 引擎的解决方案

//this.localAvatarImage : Laya.Image
const localImage = new Image()
localImage.src = localPlayer.userInfo.avatarUrl;
localImage.onload = () => {
    const scale = localImage.width / this.remoteAvatarImage.width
    const t2d = new Laya.Texture2D(localImage.width / scale, localImage.height / scale, (Laya as any).TextureFormat.R8G8B8A8)
    this.localAvatarImage.graphics.drawImage(new Laya.Texture(t2d), 0, (this.localAvatarImage.height - localImage.height / scale) / 2)
    t2d.loadImageSource(localImage)
}

开发者文档

tt.createImage
收藏
我的收藏

语法

参数说明

返回值

addEventListener 类型说明

listener 参数说明

加载完成时 target 的参数说明

错误码

扫码体验

代码示例

tt.createImage收藏我的收藏

语法

参数说明

返回值

addEventListener 类型说明

listener 参数说明

加载完成时 target 的参数说明

错误码

扫码体验

代码示例

tt.createImage
收藏
我的收藏