视频圈发布时不传封面默认一张图片
This commit is contained in:
parent
8694b6101f
commit
c27913c586
|
|
@ -58,6 +58,22 @@
|
||||||
<view class="tabbar" @click="submit()">发布
|
<view class="tabbar" @click="submit()">发布
|
||||||
</view>
|
</view>
|
||||||
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -75,7 +91,10 @@
|
||||||
//头像上传
|
//头像上传
|
||||||
headImg: [],
|
headImg: [],
|
||||||
videos: [],
|
videos: [],
|
||||||
videosList: ''
|
videosList: '',
|
||||||
|
canvasWidth: 295,
|
||||||
|
canvasHeight: 355,
|
||||||
|
videoSrc: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(e) {},
|
onLoad(e) {},
|
||||||
|
|
@ -103,14 +122,15 @@
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// if (!this.form.headImg) {
|
if (!this.form.headImg) {
|
||||||
// uni.showToast({
|
// uni.showToast({
|
||||||
// title: '请上视频封面',
|
// title: '请上视频封面',
|
||||||
// icon: 'none',
|
// icon: 'none',
|
||||||
// duration: 1000
|
// duration: 1000
|
||||||
// })
|
// })
|
||||||
// return;
|
// return;
|
||||||
// }
|
this.form.headImg = "https://wx.sjajk.com/file/uploadPath/logo2.png";
|
||||||
|
}
|
||||||
let data = {
|
let data = {
|
||||||
createBy: uni.getStorageSync("userId"),
|
createBy: uni.getStorageSync("userId"),
|
||||||
filePath: this.videosList,
|
filePath: this.videosList,
|
||||||
|
|
@ -136,7 +156,7 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
addvideo(e) {
|
async addvideo(e) {
|
||||||
let that = this
|
let that = this
|
||||||
uni.chooseVideo({
|
uni.chooseVideo({
|
||||||
count: 1,
|
count: 1,
|
||||||
|
|
@ -147,7 +167,7 @@
|
||||||
that.$queue.showLoading("上传中...");
|
that.$queue.showLoading("上传中...");
|
||||||
uni.getFileInfo({
|
uni.getFileInfo({
|
||||||
filePath: that.videos[i],
|
filePath: that.videos[i],
|
||||||
success: (infoRes) => {
|
success: async (infoRes) => {
|
||||||
const size = infoRes.size;
|
const size = infoRes.size;
|
||||||
if (size / 1024 / 1024 > 10) {
|
if (size / 1024 / 1024 > 10) {
|
||||||
// 图片大于2MB
|
// 图片大于2MB
|
||||||
|
|
@ -156,8 +176,9 @@
|
||||||
title: '视频超出10MB限制,请重新选择'
|
title: '视频超出10MB限制,请重新选择'
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
//获取视频第一帧作为封面
|
this.videoSrc = res.tempFilePath; //2025-03-28
|
||||||
this.onLoadedMetadata(res.tempFilePath);
|
//获取视频第一帧作为封面，ctx.drawImage时ctx.draw不回调
|
||||||
|
// await this.onLoadedMetadata(); //2025-03-28
|
||||||
|
|
||||||
// 图片小于等于2MB
|
// 图片小于等于2MB
|
||||||
uni.uploadFile({ // 上传接口
|
uni.uploadFile({ // 上传接口
|
||||||
|
|
@ -184,35 +205,80 @@
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoadedMetadata(tempFilePath) {
|
async onLoadedMetadata() {
|
||||||
let that = this
|
let that = this
|
||||||
const canvas = document.createElement('canvas');
|
const video = uni.createVideoContext('myVideo', that); //2025-03-28
|
||||||
// 设置Canvas大小
|
video.play()
|
||||||
canvas.width = 295;
|
setTimeout(function(){
|
||||||
canvas.height = 355;
|
|
||||||
console.log(canvas);
|
|
||||||
const context = canvas.getContext('2d');
|
|
||||||
const video = document.createElement('video');
|
|
||||||
video.src = tempFilePath;
|
|
||||||
// 播放视频并立即暂停以加载第一帧
|
|
||||||
video.play().then(() => {
|
|
||||||
video.pause();
|
video.pause();
|
||||||
// 将视频的第一帧绘制到canvas上
|
}, 100)
|
||||||
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
const ctx = uni.createCanvasContext('myCanvas', that) //2025-03-28
|
||||||
// 将canvas转换为base64图片
|
ctx.drawImage(video, 0, 0, 295, 355);
|
||||||
const base64Image = canvas.toDataURL('image/png');
|
ctx.draw(true, () => {
|
||||||
// 你可以在这里将base64Image用于显示或其他处理
|
console.log('✅ 标准回调执行');
|
||||||
that.checkImageSize(base64Image, (isValid) => {
|
// 第三步：在绘制完成的回调中获取图片
|
||||||
if (isValid) {
|
uni.canvasToTempFilePath({
|
||||||
// 图片校验通过后的逻辑
|
canvasId: 'myCanvas',
|
||||||
console.log('图片校验通过，可以上传');
|
quality: 0.8,
|
||||||
} else {
|
success: res => {
|
||||||
console.log('图片超出大小限制，请重新选择');
|
that.checkImageSize(res.tempFilePath, (isValid) => {
|
||||||
}
|
if (isValid) {
|
||||||
});
|
// 图片校验通过后的逻辑
|
||||||
}).catch(error => {
|
console.log('图片校验通过，可以上传');
|
||||||
console.error('无法播放视频:', error);
|
} else {
|
||||||
|
console.log('图片超出大小限制，请重新选择');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
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