Dwz Bytedance Image X
/ Title: dwzBytedanceImageX Description: dwzBytedanceImageX /
来自于:DWZ Mobile立即使用
模块示例
为帮助用户更好更快的使用模块,维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。
安卓 APK 测试包 | 技术服务微信 |
---|---|
![]() |
![]() |
概述
dwzBaiduFaceLive 模块概述
本模块封装了字节跳动火山引擎图片加载 SDK,支持 heic、heif、webp、avif 格式转化为 jpeg 格式的 base64 字符串,返回给前端 js。
模块使用攻略
- 使用之前须从火山引擎开放平台申请开发者账号并完成企业认证。字节跳动火山引擎开发平台控制台
- aid 就是 appid,通过火山引擎应用管理创建即可
- 对接火山引擎服务器端图片上传 SDK,服务端和 App 数据交互接口,图片 url 使用火山引擎的图片 url
- App 获取火山引擎 heic 图片 url
- APICloud 模块市场搜索 dwzBytedanceImageX,增加到 APICloud 工程中
- 使用此模块之前先配置 config.xml 文件,配置完毕后,需通过云端编译生效,配置方法如下:
<feature name="dwzBytedanceImageX">
<param name="aid" value="123456"/><!--对应字节跳动火山引擎appid-->
</feature>
convertImg
图片转化接口 convertImg:heic、heif、webp、avif 格式转化为 jpeg 格式的 base64 字符串,返回给前端 js
const module = api.require('dwzBytedanceImageX');
module.convertImg(
{
debug: 0, // 调试开关(默认:0):0, 1
url: item.url // 原图url
},
(ret) => {
console.log(ret);
}
);
callback(ret)
ret:
- 类型:JSON 对象
{
"status": 1, //状态值(整数);1||0,人脸识别成功/失败
"base64str": "data:image/jpeg;base64,xxx" // jpeg格式base64图片
}
示例代码
示例基于 DWZ Mobile,其它前端框架思路也是把 heic 这类图片使用 dwzBytedanceImageX 模块转换成 jpeg 格式的 base64 字符串,最后更新 img 标签的 src 属性。
<main>
<header>
<div class="toolbar">
<a class="bar-button back-button"><i class="dwz-icon-arrow-left"></i></a>
<div class="header-title">火山引擎+H5轮播</div>
</div>
</header>
<section>
<div class="preview-big-img">
<div class="dwz-slide full-size">
<div class="bd">
<ul>
{{each imageList as item}}
<li>
<div class="pop-inner">
<img src="{{item.src|showImg}}" data-src-imagex="{{item.url}}" />
</div>
</li>
{{/each}}
</ul>
</div>
<div class="hd"><ul></ul></div>
</div>
</div>
</section>
</main>
biz.dwzBytedanceImageX = {
testConvertImgRender(tpl, params) {
const imageList = [
// { url: 'http://imagex.dwzteam.site/tos-cn-i-yrjczxapd7/gif-1~tplv-yrjczxapd7-heic.heif' },
{ url: 'http://imagex.dwzteam.site/tos-cn-i-yrjczxapd7/test-1~tplv-yrjczxapd7-heic.webp' },
{ url: 'http://imagex.dwzteam.site/tos-cn-i-yrjczxapd7/test-2~tplv-yrjczxapd7-heic.heic' },
{ url: 'http://imagex.dwzteam.site/tos-cn-i-yrjczxapd7/test-3~tplv-yrjczxapd7-image.heic' },
{ url: 'http://imagex.dwzteam.site/tos-cn-i-yrjczxapd7/test-4~tplv-yrjczxapd7-image.heic' },
{ url: 'http://imagex.dwzteam.site/tos-cn-i-yrjczxapd7/test-5~tplv-yrjczxapd7-image.heic' },
{ url: 'http://imagex.dwzteam.site/tos-cn-i-yrjczxapd7/test-6~tplv-yrjczxapd7-image.heic' }
];
let html = template.render(tpl.html, { imageList });
this.html(html).initUI();
if (window.api) {
setTimeout(() => {
const module = api.require('dwzBytedanceImageX');
this.find('img[data-src-imagex]').each((index, img) => {
const $img = $(img);
module.convertImg(
{
debug: 0, // 调试开关(默认:0):0, 1
url: $img.attr('data-src-imagex') // 原图url
},
(ret) => {
if (ret.status) {
img.src = ret.base64str;
} else {
console.log(JSON.stringify(ret));
}
}
);
});
}, 600);
}
}
};
可用性
iOS 系统(后续提供),Android 系统
可提供的 1.0.0 及更高版本