视频圈发布时不传封面默认一张图片
This commit is contained in:
parent
8694b6101f
commit
c27913c586
|
|
@ -58,6 +58,22 @@
|
|||
<view class="tabbar" @click="submit()">发布
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view>
|
||||
<video
|
||||
v-if="videoSrc"
|
||||
:src="videoSrc"
|
||||
controls
|
||||
style="width: 0; height: 0"
|
||||
id="myVideo"
|
||||
></video>
|
||||
<canvas
|
||||
:style="{ border: '1px solid red' }"
|
||||
canvas-id="myCanvas"
|
||||
id="myCanvas"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
></canvas>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -75,7 +91,10 @@
|
|||
//头像上传
|
||||
headImg: [],
|
||||
videos: [],
|
||||
videosList: ''
|
||||
videosList: '',
|
||||
canvasWidth: 295,
|
||||
canvasHeight: 355,
|
||||
videoSrc: '',
|
||||
}
|
||||
},
|
||||
onLoad(e) {},
|
||||
|
|
@ -103,14 +122,15 @@
|
|||
})
|
||||
return
|
||||
}
|
||||
// if (!this.form.headImg) {
|
||||
if (!this.form.headImg) {
|
||||
// uni.showToast({
|
||||
// title: '请上视频封面',
|
||||
// icon: 'none',
|
||||
// duration: 1000
|
||||
// })
|
||||
// return;
|
||||
// }
|
||||
this.form.headImg = "https://wx.sjajk.com/file/uploadPath/logo2.png";
|
||||
}
|
||||
let data = {
|
||||
createBy: uni.getStorageSync("userId"),
|
||||
filePath: this.videosList,
|
||||
|
|
@ -136,7 +156,7 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
addvideo(e) {
|
||||
async addvideo(e) {
|
||||
let that = this
|
||||
uni.chooseVideo({
|
||||
count: 1,
|
||||
|
|
@ -147,7 +167,7 @@
|
|||
that.$queue.showLoading("上传中...");
|
||||
uni.getFileInfo({
|
||||
filePath: that.videos[i],
|
||||
success: (infoRes) => {
|
||||
success: async (infoRes) => {
|
||||
const size = infoRes.size;
|
||||
if (size / 1024 / 1024 > 10) {
|
||||
// 图片大于2MB
|
||||
|
|
@ -156,8 +176,9 @@
|
|||
title: '视频超出10MB限制,请重新选择'
|
||||
})
|
||||
} else {
|
||||
//获取视频第一帧作为封面
|
||||
this.onLoadedMetadata(res.tempFilePath);
|
||||
this.videoSrc = res.tempFilePath; //2025-03-28
|
||||
//获取视频第一帧作为封面，ctx.drawImage时ctx.draw不回调
|
||||
// await this.onLoadedMetadata(); //2025-03-28
|
||||
|
||||
// 图片小于等于2MB
|
||||
uni.uploadFile({ // 上传接口
|
||||
|
|
@ -184,25 +205,23 @@
|
|||
})
|
||||
},
|
||||
|
||||
onLoadedMetadata(tempFilePath) {
|
||||
async onLoadedMetadata() {
|
||||
let that = this
|
||||
const canvas = document.createElement('canvas');
|
||||
// 设置Canvas大小
|
||||
canvas.width = 295;
|
||||
canvas.height = 355;
|
||||
console.log(canvas);
|
||||
const context = canvas.getContext('2d');
|
||||
const video = document.createElement('video');
|
||||
video.src = tempFilePath;
|
||||
// 播放视频并立即暂停以加载第一帧
|
||||
video.play().then(() => {
|
||||
const video = uni.createVideoContext('myVideo', that); //2025-03-28
|
||||
video.play()
|
||||
setTimeout(function(){
|
||||
video.pause();
|
||||
// 将视频的第一帧绘制到canvas上
|
||||
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
// 将canvas转换为base64图片
|
||||
const base64Image = canvas.toDataURL('image/png');
|
||||
// 你可以在这里将base64Image用于显示或其他处理
|
||||
that.checkImageSize(base64Image, (isValid) => {
|
||||
}, 100)
|
||||
const ctx = uni.createCanvasContext('myCanvas', that) //2025-03-28
|
||||
ctx.drawImage(video, 0, 0, 295, 355);
|
||||
ctx.draw(true, () => {
|
||||
console.log('✅ 标准回调执行');
|
||||
// 第三步：在绘制完成的回调中获取图片
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'myCanvas',
|
||||
quality: 0.8,
|
||||
success: res => {
|
||||
that.checkImageSize(res.tempFilePath, (isValid) => {
|
||||
if (isValid) {
|
||||
// 图片校验通过后的逻辑
|
||||
console.log('图片校验通过，可以上传');
|
||||
|
|
@ -210,8 +229,55 @@
|
|||
console.log('图片超出大小限制，请重新选择');
|
||||
}
|
||||
});
|
||||
}).catch(error => {
|
||||
console.error('无法播放视频:', error);
|
||||
resolve()
|
||||
},
|
||||
fail: err => {
|
||||
console.error('截图失败:', err)
|
||||
reject(err)
|
||||
}
|
||||
}, this)
|
||||
});
|
||||
|
||||
// if (!this.checkCanvasReady()) return;
|
||||
|
||||
// // 绘制内容（必须包含可见元素）
|
||||
// ctx.beginPath();
|
||||
// ctx.arc(150, 150, 50, 0, Math.PI * 2);
|
||||
// ctx.fillStyle = '#00ff00';
|
||||
// ctx.fill();
|
||||
|
||||
// // H5 专用绘制方法
|
||||
// await this.h5Draw(ctx);
|
||||
},
|
||||
|
||||
checkCanvasReady() {
|
||||
// DOM 级检测
|
||||
const canvas = document.getElementById('myCanvas');
|
||||
if (!canvas) {
|
||||
console.error('Canvas 元素未找到');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
async h5Draw(ctx) {
|
||||
return new Promise((resolve) => {
|
||||
let callbackExecuted = false;
|
||||
|
||||
// 标准回调
|
||||
ctx.draw(true, () => {
|
||||
callbackExecuted = true;
|
||||
console.log('✅ 标准回调执行');
|
||||
resolve();
|
||||
});
|
||||
|
||||
// 双重保障
|
||||
setTimeout(() => {
|
||||
if (!callbackExecuted) {
|
||||
console.log('⏱️ 强制通过定时器完成');
|
||||
resolve();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue