自定义资源-智能创作-文档中心-腾讯云

如果想对资源进行自定义，请先了解 内置资源。
资源自定义实际上是对播放器内置资源的补充，插件可以通过配置的形式对内置资源进行编辑。
快速接入和自定义接入均支持素材自定义，自定义方式如下：
const plugin = requirePlugin('myPlugin')
plugin.initPlugin({
    source: {
        stickers: {...}, 
        effects: {...},
        filters: {...},
        ...
    }
})
以上方法的调用可以将自定义资源注册到微剪插件中，注册完成后可以用调用内置资源的方式调用自定义资源。
说明
集成接入模式和自定义接入模式的资源自定义方式一致，自定义的素材会与微剪插件内部的素材合并管理。
集成接入模式下，如果配置了自定义素材列表，界面中展示的素材列表会按照自定义列表展示。
支持自定义的素材如下：
音乐
滤镜
特效
贴纸
文字
模板
资源定制
首先引入plugin实例。
const plugin = requirePlugin('myPlugin');
1. 定制音乐
获取的内置音乐如下(仅为示意，非真实数据)：
let musicList = [{
    Name: '少年',
    key: 'key1',
    previewImage: 'https://image.xxxx.png',
    src: 'https://music.xxx.com'
},
{
    Name: '我心飞翔',
    key: 'key2',
    previewImage: 'https://image.xxxx.png',
    src: 'https://music.xxx.com'
},
...
...  // 省略
{
    Name: 'love',
    key: 'key30',
    previewImage: 'https://image.xxxx.png',
    src: 'https://music.xxx.com'
}]
假设内置音乐有30首，若您希望能在最前面添加一首歌。
您需要准备好在线的音乐地址: https://music.xxx.com。
musicList = musicList.unShift({
    Name: '我是插入的一首歌...',
    key: 'key0',
    previewImage: 'https://image.xxxx.png',
    src: 'https://music.xxx.com'
})
直接对数组进行unShift即可， 接下来修改下插件的资源配置。
plugin.initPlugin({
    source: {
        music: musicList
    }
})
同理，如果您需要删除某些音乐对 musicList 数组进行操作即可。
当然您不必每次修改资源就调用 initPlugin 进行更新，您可以把所有资源处理之后再调用  initPlugin 进行资源更新。
例如：
plugin.initPlugin({
    source: {
        music: musicList,
        filters: filterLlist,
        effects: effectList,
        ...,
        ...,
    }
})
2. 定制滤镜
获取的内置滤镜如下(仅为示意，非真实数据)：
let filterList = {
    tabs: [{
        key: 'tab1',
        name: '人像',
        list: [{
            key: 'filter1',
            name: '灰色',
            previewImage: 'https://image.xxxx.png'
        },{
            key: 'filter2',
            name: '清新',
            previewImage: 'https://image.xxxx.png'
        }]
    }, {
        key: 'tab2',
        name: '风景',
        list: [{
            key: 'filter3',
            name: '秋天',
            previewImage: 'https://image.xxxx.png'
        },{
            key: 'filter4',
            name: '春天',
            previewImage: 'https://image.xxxx.png'
        }]
    }]
}
可以看到有2个分类，每个分类下有一些滤镜。滤镜支持新增分类，也可以在分类下添加滤镜。
新增分类：
filterList.tabs.push({
  key: 'tab3',
  name: '分类3',
  list: [...]
})
新增滤镜：
在某个分类的list字段下新增
  filterList.tabs[0].list.push({
      key: 'filter5',
      name: '人气',
      previewImage: 'https://image.xxxx.png',
      src: 'https://lut.xxx.png'
  })
可以看到新增滤镜的时候多了一个src字段，它就是滤镜需要的 lut 图。同理分类和 list 也可以自由删除，随意变换顺序。
说明
 更多详情，请参见 滤镜素材制作。
3. 定制特效
获取的内置特效如下(仅为示意，非真实数据)：
{
    tabs: [{
        key: 'tab1',
        name: '梦幻',
        list: [{
            key: 'effect1',
            name: '爱心',
            previewImage: 'https://image.xxx.gif'
        },{
        key: 'tab2',
        name: '动感',
        list: [{
            key: 'effect2',
            name: '灵魂分离',
            previewImage: 'https://image.xxx.gif'
        }]
    }]
}
特效支持添加 alpha类型特效，详情请参见 制作教程。
﻿
﻿
如图： 闪粉、金粉、星火 为alpha系列特效，原理和其他稍有不同，alpha系列特效底层渲染的是.mp4文件。
添加一个alpha类型特效：
effectList = {
    tabs: [{
        key: 'tab1',
        name: '梦幻',
        list: [{
            key: 'alpha1',
            name: "自定义",
            previewImage: 'https://image.xxx.gif',
            is_alpha: true,
            alpha_url: 'https://xxxxx.mp4'
        },{
            key: 'effect1',
            name: '爱心',
            previewImage: 'https://image.xxx.gif'
        }]
    },{
        key: 'tab2',
        name: '动感',
        list: [{
            key: 'effect2',
            name: '灵魂分离',
            previewImage: 'https://image.xxx.gif'
        }]
    }]
}
可以看到相比默认参数，新增了 is_alpha, alpha_url 。
字段解释：
is_alpha：是否 alpha 类型特效，传 true 即可。
alpha_url：alpha视频地址。
同理，您也可以随意调整分类和 list。
说明
 更多详情请参见 特效素材制作。
4. 定制贴纸
默认数据结构如下(仅为示意，非真实数据)：
let stickerList = {
    tabs: [{
        key: 'tab1',
        name: '贴纸',
        list: [{
            key: 'sticker1',
            previewImage: 'https://xxx.png',
            name: '贴纸1'
        }]
    },{
        key: 'tab2',
        name: '表情',
        list: [{
            key: 'sticker2',
            previewImage: 'https://xxx.png'，
            name: '贴纸2'
        }]
    }]
}
假设在tab1 新增一个贴纸 sticker3。
stickerList = {
    tabs: [{
        key: 'tab1',
        name: '贴纸',
        list: [{
            key: 'sticker1',
            previewImage: 'https://xxx.png'，
            name: '贴纸1'
        }, {
            key: 'sticker3',
            previewImage: 'https://xxx.png',
            name: '贴纸3'
            zipUrl: "https://xxx.zip"
        }]
    },{
        key: 'tab2',
        name: '表情',
        list: [{
            key: 'sticker2',
            previewImage: 'https://xxx.png',
            name: '贴纸2'
        }]
    }]
}
可以看到定制的sticker3多了一个zipUrl字段， 它就是您需要制作的贴纸素材地址。
说明
 更多详情请参见 贴纸制作教程。
5. 定制文字
v1.8.0及以后版本：
v1.8.0后：
{
    fontList: [{
        family: 'fangzhengcuti',
        name: '方正粗体'
    },
    {
        family: 'huangyou',
        name: '黄油体'
    },
    {
        family: 'weiruanyahei',
        name: '微软雅黑',
        url: 'https://xxxx.微软雅黑.ttf'
    }
    ],
    stickers: [
        {
            key: 'xxx',
            previewImage: 'https://xxxxxx'
        },
        {
            key: 'new_text',
            previewImage: 'https://xxxxxx',
            resourceUrl: 'https://xxxxxx'
        }
    ],
    huazi: [
        {
            key: 'xxx',
            previewImage: 'https://xxxxxx'
        }
    ]
}
﻿
v1.8.0之前版本：
默认数据结构如下(仅为示意，非真实数据)：
let fontList = [{
    family: 'fangzhengcuti',
    name: '方正粗体'
},
{
    family: 'huangyou',
    name: '黄油体'
},
...  // 省略
]
可以看到字体是没有分类的，假设需要新增一种字体 微软雅黑。
fontList = [{
    family: 'fangzhengcuti',
    name: '方正粗体'
},
{
    family: 'huangyou',
    name: '黄油体'
},
{
    family: 'weiruanyahei',
    name: '微软雅黑',
    url: 'https://xxxx.微软雅黑.ttf'
},
...  // 省略
]
相比默认多了一个url地址，它是字体的 ttf 地址。
说明
 更多详情，请参见 字体制作。
6. 定制模板
数据结构如下：
 let templateList = [{
        count: 3,
        key: 'pengyouquan',
        name: '心动朋友圈'
        previewUrl: 'https://xxxx.mp4',
        thumbUrl: 'https://xxxx.jpg'
    }, {
        count: 5,
        key: 'jiyi',
        name: '夏日记忆',
        previewUrl: 'https://xxxx.mp4',
        thumbUrl: 'https://xxxx.jpg'
    }
    ...  // 省略
    ]
假如您需要新增一种模板test。
    templateList = [{
        count: 3,
        key: 'pengyouquan',
        name: '心动朋友圈'
        previewUrl: 'https://xxxx.mp4',
        thumbUrl: 'https://xxxx.jpg'
    }, {
        count: 5,
        key: 'jiyi',
        name: '夏日记忆',
        previewUrl: 'https://xxxx.mp4',
        thumbUrl: 'https://xxxx.jpg'
    },{
        count: 9,
        key: 'test',
        name: '测试模板',
        previewUrl: 'https://xxxx.mp4',
        thumbUrl: 'https://xxxx.jpg',
        resourceUrl: 'https://xxxxx.zip'
    }
    ]
可以看到相比默认结构，您需要传入一个resourceUrl字段，它就是您需要准备好的模板资源地址。
说明
 更多详情，请参见 模板制作教程。
最后，自定义完成素材之后千万别忘了调用plugin.initPlugin进行更新生效哦。
自定义资源

本页目录：

资源定制

1. 定制音乐

2. 定制滤镜

3. 定制特效

4. 定制贴纸

5. 定制文字

6. 定制模板
