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平台上传视频截取视频第一帧生成图片相关推荐

dy创作者平台上传并发布视频
声明本文以教学为基准.本文提供的可操作性不得用于任何商业用途和违法违规场景. 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任. 如有侵权,请联系 ...
Java图片，视频上传，截取视频帧以及文件下载和视频IO获取
public class FileUtil { @Value("${img.url}") public String imgUrl; @Value("${video.ur ...
stm32f103c8t6+ESP8266利用onenet平台上传数据到云平台，再利用云平台远程下发命令给单片机控制LED灯亮灭
stm32f103c8t6+ESP8266利用onenet平台上传数据到云平台,再利用云平台远程下发命令给单片机控制LED灯亮灭接触stm32已经有一年半的时间了,从最开始的stm32F103ZET ...
uniapp h5拍照上传照片
前段时间公司要弄一个uniapp的H5拍照上传的功能,看这位博主常德_威少的博客完成了(博客地址:使用canvas压缩图片大小_常德_威少的博客-CSDN博客_canvas压缩图片),于是想把我写 ...
Android WebView 支持H5图片上传input type=file
2019独角兽企业重金招聘Python工程师标准>>> Android WebView 缓存处理 Android WebView 支持H5图片上传<input type=&qu ...
Atitit .h5文件上传 v3
Atitit .h5文件上传 v3 1. 上传原理1 2. V3版新特性1 3. Html1 4. Js2 5. uploadV2.js2 6. upServlet & FileUploadS ...
微信开发h5图片上传（拍照、图片压缩、IOS照片旋转)
微信开发h5图片上传开发环境 vue.js,原生h5 input file, 微信公众号网页依赖安装 exif-js:IOS下拍照照片的方向有问题, 需要exif-js来读取照片信息进行旋转处理: ...
上传文件、视频、图片、全选、全不选、截屏直接粘贴图片
上传文件.视频.图片.全选.全不选.截屏直接粘贴图片控制器代码:ObUnitsController.php <?phpnamespace App\Admin\Controllers;use A ...
php5.3n上传视频,为什么上传抖音视频不清晰
上传抖音视频不清晰的原因是因为视频都是每张静态的照片信息组合而成,但由于算法和编码的不同会导致信息的流失,所以上传抖音视频时由于增加了数据编码而导致不清晰. 很多小伙伴在用抖音拍视频时,总会发现拍的视 ...
vue-element上传视频并预览、上传多个视频+laravel8后台（larke-admin）
上传单个视频 1.vue中注意:BASE_API就是后台api的地址,token自己设置,也可以删除,看后台需要 <el-upload class="avatar-uploader& ...

uni-app App和H5平台上传视频截取视频第一帧生成图片

uni-app App和H5平台使用renderjs上传视频截取视频第一帧生成图片

文章目录

前言

一、renderjs简介

二、创建index.vue文件，下方代码均在index.vue中

1.HTML代码

2.逻辑层代码

3.视图层代码

实现效果

1.base64图片效果

2.线上图片效果

uni-app App和H5平台上传视频截取视频第一帧生成图片相关推荐

最新文章

热门文章