tt.createImage

基础库 1.31.0 开始支持本方法，低版本需做兼容处理。

创建一个图片对象。

语法

tt.createImage();

参数说明

无

返回值

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

参数	参数类型	说明
src	string	图片的 URL, base64 内容, 或者 ArrayBuffer 数据
width	number	图片的真实宽度
height	number	图片的真实高度

事件

事件名	说明
load	通过 addEventListener 监听图片加载完成后触发的回调函数
error	通过 addEventListener 监听图片加载发生错误后触发的回调函数

回调函数的参数说明

类型为 object 类型，属性如下

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

加载完成时 target 的参数说明

参数	参数类型	说明
data	string	图片的 buffer 信息
width	number	图片的真实宽度
height	number	图片的真实高度
complete	boolean	图片的是否加载成功，true 为成功，false 为失败。

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

const image = tt.createImage();
image.src = "https:xxx.png";
image.width = 200;
image.height = 200;
image.addEventListener("load", (res) => {
  console.log("加载成功");
});
image.addEventListener("error", (res) => {
  console.log("加载失败");
});

Bug & Tip

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

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

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
语法
参数说明
返回值
事件
扫码体验
代码示例
Bug & Tip