视频流截取某一帧保存为图片并上传至服务器

最新推荐文章于 2024-07-17 15:18:17 发布

单手敲代码xxx

最新推荐文章于 2024-07-17 15:18:17 发布

阅读量246

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_28373303/article/details/133896529

版权

    //图片
    const canvas = document.createElement('canvas') //  创建canvas 用来截图

    const video: any = document.getElementById('videoElement') //创建video 
//用来存放被截图的视频

    // const video = this.$refs.video;   //获取到video标签
    const a = document.createElement('a')    
    // const a = document.getElementById("a"); //  用来自动下载图片保存到本地
    video.setAttribute('crossOrigin', 'anonymous') //  支持跨域

    canvas.width = video.videoWidth
    canvas.height = video.videoHeight
    const ctx = canvas.getContext('2d')

    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

    const filename = 'file_' + new Date().getTime() + '.jpg'
    a.setAttribute('download', filename)

    a.href = canvas.toDataURL('image/jpeg')

    a.click()    //下载

    await upload(a.href)   //上传服务器

// 将base64转换为blob
const dataURLtoFile = (dataURI, type) => {
  let binary = atob(dataURI.split(',')[1])
  let array = []
  for (let i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i))
  }
  return new Blob([new Uint8Array(array)], {type: type})
}
const upload = async (baseStr) => {
  // 图片地址
  let blob = dataURLtoFile(baseStr, 'image/jpeg')
  var formData = new FormData()
  let filename = new Date().getTime()
  let fileOfBlob = new File([blob], filename + '.jpg') // 重命名了
  formData.append('file', fileOfBlob)

  let result = await uploadPicture(formData)   //上传服务器
  if (result.status == 200) {
    // 上传成功后的处理
    var data = result.data.result
    // 图片地址
    // var url = baseImgUrl + data[0]
    // ...
    ElMessage.success('上传成功')
  } else {
    ElMessage.error('上传失败')
  }

}

const uploadPicture = async (formData) => {
    return await axios.post(uploadurl, formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
        },
        onUploadProgress: function (progressEvent) {
            var percentComplete = Math.round(
                (progressEvent.loaded * 100) / progressEvent.total,
            )
            console.log(percentComplete + '% ' + progressEvent.total + ' bytes')
        },
    })
}