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)
}点击纠错
该文档是否对你的开发有所帮助？
有帮助
没帮助
该文档是否对你的开发有所帮助？
有帮助
没帮助