uni-app App和H5平臺使用renderjs上傳視頻截取視頻第一幀生成圖片

提示：因為uni-app中renderjs僅支持App和H5平臺，所以該方案僅支持當前這兩個平臺。 this.request為本人封裝的接口請求方法，可以替換成個人的接口請求方法，如有需要可在下方留言

---

文章目錄

• uni-app App和H5平臺使用renderjs上傳視頻截取視頻第一幀生成圖片
• 前言
• 一、renderjs簡介
• 二、創建index.vue文件，下方代碼均在index.vue中
• • 1.HTML代碼
  • 2.邏輯層代碼
  • 3.視圖層代碼
• 實現效果
• • 1.base64圖片效果
  • 2.線上圖片效果

---

前言

因為uni-app App端沒有dom概念，不支持dom操作，并且uni-app的canvas不支持繪制video。renderjs完美解決了uni-app App端的基礎dom操作。實現效果在最下方！！

---

一、renderjs簡介

renderjs是一個運行在視圖層的js。它比[WXS](https://uniapp.dcloud.io/tutorial/miniprogram-subject.html#wxs)更加強大。它只支持app-vue和h5。

renderjs的主要作用有2個：

• 大幅降低邏輯層和視圖層的通訊損耗，提供高性能視圖交互能力
• 在視圖層操作dom，運行for web的js庫

二、創建index.vue文件，下方代碼均在index.vue中

1.HTML代碼

代碼如下（示例）：

<template><view class="content">// 邏輯層調用視圖層方法，采用監聽data中變量改變的方法<view id="canvas" class="canvas" :prop="newVal" :change:prop="canvas.create"></view><button @click="choose">chooseVideo</button></view> </template>

2.邏輯層代碼

代碼如下（示例）：

<!-- 邏輯層script --> <script>export default {data() {return {newVal: null};},methods: {choose(){// 選取視頻文件，拿到本地地址uni.chooseVideo({sourceType: ['camera', 'album'],success: (blod)=>{// 獲取視頻信息，拿到寬高信息uni.getVideoInfo({src: blod.tempFilePath,success: (info) => {// 上傳視頻到網絡地址，當然也可以使用本地地址。App、H5平臺本人都測試過，都沒問題！！！uni.uploadFile({url: 'http://替換成自己個上傳文件接口/api/common/upload', //僅為示例，非真實的接口地址filePath: blod.tempFilePath,name: 'file',formData: {'token': uni.getStorageSync('userInfo').token},success: src => {// fullurl也可以使用本地地址，上傳選擇文件獲取到的 => blod.tempFilePaththis.newVal = {fullurl: JSON.parse(src.data).data.fullurl, width: info.width, height: info.height}// 這里當時想做個平臺區分，但是后面發現H5平臺這種調用方式，視圖層create接受參數的時候，只能接收到newValue，但是不能接收到event, ownerInstance，所以還是統一使用上方操作// 下方方法僅展示，調用還是統一使用上方操作// // #ifdef APP-PLUS// this.newVal = {fullurl: JSON.parse(src.data).data.fullurl, width: info.width, height: info.height}// // #endif// // #ifdef H5// this.create({fullurl: JSON.parse(src.data).data.fullurl, width: info.width, height: info.height})// // #endif},complete: all => {console.log(JSON.parse(all.data))}})}})}})},// 邏輯層拿到base64字符串，上傳網絡圖片getBase64(options){this.request({url: 'common/base64', //僅為示例，非真實的接口地址data: {base64: options.base64}}).then(res=>{// 拿到上傳base64圖片的網絡圖片console.log(res)})},}} </script>

3.視圖層代碼

代碼如下（示例）：

<!-- 視圖層script module對應HTML代碼中view的id--> <script module="canvas" lang="renderjs">export default {methods: {// 視圖層創建base64圖片create(newValue, oldValue, ownerInstance){// 第一次進入為空不操作if(newValue == null){return}// 在緩存中創建video標簽var video = document.createElement("VIDEO")// 通過setAttribute給video dom元素添加自動播放的屬性，因為視頻播放才能獲取封面圖 // 設置video自動播放屬性video.autoplay = true// 該設置方法無效// video.setAttribute('autoplay', true)// 再添加一個靜音的屬性，否則自動播放會有聲音// 該設置方法無效// video.setAttribute('muted', true)video.muted = true// 如果報錯Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.// 可以把下面兩行代碼加上，因為我用的線上video url，所以可能拋出了異常。大概意思就是跨域了toDataURL()使用了外域資源video.setAttribute('crossOrigin', 'anonymous')video.crossOrigin = '*'// 上面我們只是創建了video標簽，視頻播放需要內部的source的標簽，scr為播放源video.innerHTML = '<source src=' + newValue.fullurl + ' type="audio/mp4">'// 再創建canvas畫布標簽var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// video注冊canplay自動播放事件// 防止video不播放，所以手動加個播放操作video.play()// video播放事件video.addEventListener('canplay', ()=>{// 創建畫布的寬高屬性節點，就是圖片的大小，單位PXvar anw = document.createAttribute("width");anw.nodeValue = newValue.width;var anh = document.createAttribute("height");anh.nodeValue = newValue.height;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);// 畫布渲染ctx.drawImage(video, 0, 0, newValue.width, newValue.height);// 生成base64圖片，指定type為jpeg格式生成的圖片base64編碼會小很多var base64 = canvas.toDataURL('image/jpeg') // 這就是封面圖片的base64編碼// 傳遞數據給邏輯層ownerInstance.callMethod('getBase64',{base64: base64})// 刪除創建的video 、canvas dom，要不然重新選取視頻生成圖片不生效// ps：開始有這個問題，但是后面不知道為什么又沒有了，如果發現生成第一次base64之后再選擇不生效，可以嘗試一下把下方注釋打開// document.body.removeChild(video)// document.body.removeChild(canvas)})}}} </script>

---

提示：本文由本人原創，轉載請注明出處!!! 如果本文對你有幫助，請點個贊吧！

實現效果

1.base64圖片效果

2.線上圖片效果

總結

以上是生活随笔為你收集整理的uni-app App和H5平台上传视频截取视频第一帧生成图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。