网上一大堆对图片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. python基础入门教程(一条龙服务)

    一.语言基础 01-1 计算机系统 解释器下载 变量   小整数池 01-2 垃圾回收机制 02 数据类型 运算符(解压赋值等) 03 流程控制 if while for 04 整形 字符串 列表 0 ...

  2. RabbitMQ的使用(一)- RabbitMQ服务安装

    RabbitMQ的使用(一)- RabbitMQ服务安装 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/12769627.ht ...

  3. Pandas切片操作:很容易忽视的SettingWithCopyWarning

    Pandas是一个强大的分析结构化数据的工具集,主要用于数据挖掘和数据分析,同时也提供数据清洗功能. 很多初学者在数据的选取,修改和切片时经常面临一些困惑.这是因为Pandas提供了太多方法可以做同样 ...

  4. jenkins 安装成功之后配置

    一.基础配置介绍 jenkins安装成功之后如果某些东西配置的话,可能部署的时候一堆的问题,所以单独总结一下,让大家少走弯路 二.准备工作 1.需要准备一台服务器,大家可以在网上买,个人学习的话还是建 ...

  5. webpack----js的静态模块打包器

    webpack----js的静态模块打包器 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 webpack 是一个现代 J ...

  6. E. Count The Blocks

    E. Count The Blocks 这是一个计数题,又把我卡自闭了...之前也碰到过类似的题目,这次居然还没有写出来,感觉自己还是太菜了,加油补题吧. 题目大意: 给你一个数字 \(n\),代表的 ...

  7. mybatis传递参数的方法

    一.传递一个参数 例:根据员工编号查询员工的基本信息 1.在dao接口中声明一个方法 2.在mapper中实现该方法 3.测试 /** * 传递一个参数 */ public class Test02 ...

  8. CSS颜色及文本字体

    CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示,比如:red 红色,yellow黄色,pick粉色 16 ...

  9. Spring Boot在Controllder中常用注解

    1.@RestController @RestController 相当于@Controller+@ResponseBody 注解如果使用@RestController 注解Controller 中的 ...

  10. STM32 TIM 多通道互补PWM波形输出配置快速入门

    platform:stm32f10xxx lib:STM32F10x_StdPeriph_Lib_V3.5.0 前言 在做三相逆变的时候,需要软件生成SVPWM波形,具体的算法需要产生三对互补的PWM ...