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

提示：因?yàn)閡ni-app中renderjs僅支持App和H5平臺(tái)，所以該方案僅支持當(dāng)前這兩個(gè)平臺(tái)。 this.request為本人封裝的接口請(qǐng)求方法，可以替換成個(gè)人的接口請(qǐng)求方法，如有需要可在下方留言

---

文章目錄

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

---

前言

因?yàn)閡ni-app App端沒(méi)有dom概念，不支持dom操作，并且uni-app的canvas不支持繪制video。renderjs完美解決了uni-app App端的基礎(chǔ)dom操作。實(shí)現(xiàn)效果在最下方！！

---

一、renderjs簡(jiǎn)介

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

renderjs的主要作用有2個(gè)：

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

二、創(chuàng)建index.vue文件，下方代碼均在index.vue中

1.HTML代碼

代碼如下（示例）：

<template><view class="content">// 邏輯層調(diào)用視圖層方法，采用監(jiān)聽(tīng)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) => {// 上傳視頻到網(wǎng)絡(luò)地址，當(dāng)然也可以使用本地地址。App、H5平臺(tái)本人都測(cè)試過(guò)，都沒(méi)問(wèn)題！！！uni.uploadFile({url: 'http://替換成自己個(gè)上傳文件接口/api/common/upload', //僅為示例，非真實(shí)的接口地址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}// 這里當(dāng)時(shí)想做個(gè)平臺(tái)區(qū)分，但是后面發(fā)現(xiàn)H5平臺(tái)這種調(diào)用方式，視圖層create接受參數(shù)的時(shí)候，只能接收到newValue，但是不能接收到event, ownerInstance，所以還是統(tǒng)一使用上方操作// 下方方法僅展示，調(diào)用還是統(tǒng)一使用上方操作// // #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字符串，上傳網(wǎng)絡(luò)圖片getBase64(options){this.request({url: 'common/base64', //僅為示例，非真實(shí)的接口地址data: {base64: options.base64}}).then(res=>{// 拿到上傳base64圖片的網(wǎng)絡(luò)圖片console.log(res)})},}} </script>

3.視圖層代碼

代碼如下（示例）：

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

---

提示：本文由本人原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處!!! 如果本文對(duì)你有幫助，請(qǐng)點(diǎn)個(gè)贊吧！

實(shí)現(xiàn)效果

1.base64圖片效果

2.線上圖片效果

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。