最近项目中遇到问题,记录一下。
使用的是uniapp,需要在编辑组件editor中插入视频。但editor本身是不支持视频插入的,于是采用插入视频封面的方式,为视频占位。
选择视频时,H5和安卓端都没有提供视频封面的缩略图。我采用了rendjs的方式将获取到的视频封面转化成了base64编码的字符串。
但是,安卓端将图片上传时,服务器没收到任何东西。
其实微信小程序也存在这样的问题。当插入图片使用选择视频时提供的缩略图thumbTempFilePath时,实际生成的<img>标签的src值也是base64的,那么上传的时候不要直接使用这个src值,而应该使用thumbTempFilePath的值。
而H5貌似将base64转换成了图片文件,上传没问题。如下图。
解决安卓端的问题:
调用HTML5+ 的扩展规范,生成Bitmap对象加载base64图片,然后将其保存到本地,得到保存路径。上传时就是用此路径。
// #ifdef APP-PLUS
// renderjs获得视频封面后调用
updateVideos(newVal) {
this.base64ToPath(newVal)
},
// 将base64转换成path
base64ToPath(list) {
for(const item of list) {
const isBase64 = item.posterUrl.startsWith('data:image')
if(isBase64) {
const arr = item.posterUrl.split(',')
// base64编码
const base64Data = arr[1]
const mime = arr[0].match(/:(.*?);/)[1]
// 文件的后缀
const suffix = mime.split('/')[1]
const fileName = Date.now() + '.' + suffix
// 创建Bitmap对象将图片加载,然后保存到本地,得到保存地址,然后插入editor
const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
bitmap.loadBase64Data(base64Data, () => {
const filePath = '_doc/uniapp_temp/' + fileName
bitmap.save(filePath, { overwrite: true }, (res) => {
// res的值:
// {
// "target": "file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_temp/1699235749412.jpeg",
// "width": 360,
// "height": 200,
// "size": 9065
// }
// 释放Bitmap图片占用的内存资源,销毁后图片对象将不可使用,其id属性值为undefined,调用其所有方法操作都会失败。
bitmap.clear()
this.editorCtx.insertImage({
width: '100%', // 图片宽度(pixels/百分比)
src: res.target, // 图片保存到本地的路径
extClass: 'video-poster',
data: {
url: item.url, // 视频地址
width: item.width, // 图片宽度(pixels/百分比)
height: item.height,
},
alt: '视频',
})
resolve(res.target)
}, (err) => {
console.log('保存-Base64图片数据失败')
bitmap.clear()
reject(err)
})
}, (e) => {
this.$u.toast('插入视频失败')
})
}
}
},
// #endif
// 上传,参数url就是上面保存视频封面的路径
upload(url) {
const task = uni.uploadFile({
url: this.actionUrl, // 图片上传到服务器的地址
filePath: url, // 保存视频封面的路径
name: 'imgs', // 文件对应的key
success: res => {
// .....
}
}
参考:利用canvas获取视频封面 https://segmentfault.com/a/1190000041753438
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。