网上一大堆对图片base64转Blob、File的方法 很少有视频mp4转的,可能是因为原理相同的原因吧!
但在项目中针对视频流base64转Blob对象时,花了好长时间才成功,特专门记录一下!

APP中通过录像或者从手机中选择视频的方式,取出了视频流的base64数据,用网上常见的方式进行转化,却一直不成功,究其原因是,通常的base64转Blob对象方法,都需要带有前缀标识的base64。
例如:
图片的:
data:image/jpeg:base64,------

视频的:

data:video/mp4;base64,----

而项目中插件返回的是纯base64,不带前缀,所以需要对方法进行特殊处理。

首先是常见的转换方法:

 function dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
// 结果: image/png
console.log("arr[0]====" + JSON.stringify(arr[0]));
// "data:image/png;base64"
console.log("arr[0].match(/:(.*?);/)====" + arr[0].match(/:(.*?);/));
// :image/png;,image/png
console.log("arr[0].match(/:(.*?);/)[1]====" + arr[0].match(/:(.*?);/)[1]);
// image/png
var bstr = atob(arr[1].replace(/\s/g, ''));
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type : mime
});
}

针对只有纯base64数据修改后的方法:

function dataURLtoBlob2(dataurl) {
var arr = dataurl;
var bstr = atob(arr.replace(/\s/g, ''));
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type : 'video/mp4'
});
}

相关参考:

https://blog.csdn.net/qq_39364032/article/details/82177456?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.nonecase

MP4视频流base64数据转成Blob对象的更多相关文章

  1. python2/3中 将base64数据写成图片,并将图片数据转为16进制数据的方法、bytes/string的区别

    1.python2将base64数据写成图片,并将数据转为16进制字符串的方法 import binascii img = u'R0lGODlhagAeAIcAAAAAAAAARAAAiAAAzABE ...

  2. 文件转base64处理或转换blob对象链接

    一.文件转base64,代码: axios({ method: 'get', url: apiPath.common.downloaddUrl, responseType: 'blob'}).then ...

  3. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

  4. 将本地图片数据制作成内存对象数据集|tensorflow|手写数字制作成内存对象数据集|tf队列|线程

      样本说明: tensorflow经典实例之手写数字识别.MNIST数据集. 数据集dir名称 每个文件夹代表一个标签label,每个label中有820个手写数字的图片 标签label为0的文件夹 ...

  5. Hibernate中查询数据转成VO对象及注意问题

    大家都可能会遇到,在用json传输数据时,很多字段是来自不同的表数据,需要我们进行封装数据. hibernate提供这么一个方法用来直接封装查询属性: query.setResultTransform ...

  6. Base64图片转Blob对象

    //将Base64图片转成Blob对象 //@args: base64Url:编码字符串,contentType:类型. function base64UrltoBlob(base64Url, con ...

  7. uniapp中拿到base64转blob对象,或base64转bytes字节数组,io操作写入字节流文件bytes

    1. uniAPP中拿到附件的base64如何操作,如word文件 /*** 实现思路:* 通过native.js的io操作创建文件,拿到平台绝对路径* 再通过原生类进行base64解码,拿到字节流b ...

  8. js,JQ 图片转换base64 base64转换为file对象,blob对象

    //将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...

  9. 利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传

    最近客户要求实现论坛贴子附件裁剪功能,没有考虑js与ios.android容器交互解决方案,单纯用js去实现它的.由于本来附件上传用的别的插件实现的,所以是在此基础上费了不少劲,才把jQuery-ph ...

随机推荐

  1. MySQL Linux 环境安装

    1.卸载 MySQL #查看 Linux 中是否有 mysql rpm -aq |grep -i mysql #有的话通过下面命令卸载删除 rpm -ev mysql-libs-**** --node ...

  2. redis系列之4----redis高级应用(集群搭建、集群分区原理、集群操作)

    文章主目录 Redis集群简介 Redis集群搭建 Redis集群分区原理 集群操作 参考文档 本文是redis学习系列的第四篇,前面我们学习了redis的数据结构和一些高级特性,点击下面链接可回看 ...

  3. Android 开发技术周报 Issue#278

    新闻 Pixel 4a渲染图曝光:或能成新款iPhone SE有力竞争者 Google Play商店为预注册的游戏和应用提供自动安装功能 Android最强单摄Pixel 4a样张曝光:1200万像素 ...

  4. 循环结构(for、while)

    3.4用for语句实现循环结构 什么是循环结构 for语句 1.什么是循环结构? 循环结构又称为重复结构,是利用计算机运算速度快以及能进行逻辑控制的特点来重复执行某些操作.重复执行的部分称为循环体. ...

  5. SpringCloudStream学习(三)RabbitMQ中的惰性队列

    ​ 从RabbitMQ 3.6.0之后,有了 Lazy Queues 的概念-一个会尽早的将队列中的内容移动到磁盘的队列,并且只有当消费者需要的时候,才会将它们加载到内存中 ​ 惰性队列设计的一个主要 ...

  6. markdonwn 测试1

    标题测试 ## 二级标题 ### 三级标题 二级标题 三级标题 段落格式 换行 末尾两个空格 第一行第一行第一行第一行第一行第一行第一行第一行 第二行第二行第二行第二行第二行第二行第二行第二行 第一行 ...

  7. javaweb学习之路(1)request

    1.本次练习写一个简单的注册页面 准备工作:首先搭建好服务器tomcat环境,使用的编译软件是eclipse 2.在eclipse中创建一个web工程 3.在webContent文件夹下创建一个reg ...

  8. android 防止多次点击,导致事件监听响应到其他界面

    下面有个案例: A点击的时候就跳转到B界面,点击B界面后结束,返回到A界面中 1.此时在B界面中,设置点击事件,点击后结束B v.setOnClickListener(new OnClickListe ...

  9. 理解css属性的继承和覆盖

    首先,我们梳理一下哪些属性会被继承 文本 color 颜色,a元素除外 direction 方向 font 字体 font-family 字体系列 font-style 字体风格 font-size ...

  10. iNeuOS工业互联平台,实现动态图元、计算平台、远程控制、数据转发等,和大厂相比如何

    目       录 1.      概述... 2 2.      平台演示... 2 3.      增加按钮组态元件... 2 4.      组态图元旋转及动画... 3 5.      后台容 ...