文件转babase64

function getImgToBase64(url,callback){//将图片转换为Base64
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL('image/png');
callback(dataURL);
canvas = null;
};
img.src = url;
}
/**
* 获取指定文件的base64编码
* @param object File Blob 或 File 对象 这里是file对象
* @param Function callback 返回数据的回调函数
* @return string 返回base64编码
*/
function getBase64(File,callback){
var reader = new FileReader(); //IE10+
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
var File = File||$("#file").get(0).files[0]; //获取上传的文件对象
/*
FileList {0: File, 1: File, length: 2} 多个文件
File:{name: "fan.jpg", lastModified: 1559019043288, lastModifiedDate: Tue May 28 2019 12:50:43 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 3346145, type: "image/jpeg"}
FileList {0: File, 1: File, length: 2} 单个文件
*/
if (File) { //读取指定的 Blob 或 File 对象 触发loadend 事件 并将图片的base64编码赋值给result
reader.readAsDataURL(File);
//reader.readAsText(File)
//异步通信 回调函数返回
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分(可选可不选,需要与后台沟通)
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败,请上传不大于2M的图片!');
return;
}else{
var base64Data=reader.result;
//返回base64编码
callback(base64Data);
}
}
} }

base64转换为file对象

function Base64toFile(dataurl, filename) {//将base64转换为文件
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}

base64转blob

function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
/*2:转bob*/
/**
* 将以base64的图片url数据转换为Blob
* @param base64 用url方式表示的base64图片数据
* @return blob 返回blob对象
*/
function convertBase64UrlToBlob(base64){
var type =base64.split(",")[0].match(/:(.*?);/)[1];//提取base64头的type如 'image/png'
var bytes=window.atob(base64.split(',')[1]);//去掉url的头,并转换为byte (atob:编码 btoa:解码) //处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);//通用的、固定长度(bytes.length)的原始二进制数据缓冲区对象
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type :type});
}

Blob转base64

function blobToBase64(blob, callback) {
let a = new FileReader();
a.onload = function (e) { callback(e.target.result); }
a.readAsDataURL(blob);
}

js实现图片资源、blob、base64的各种场景转换的更多相关文章

  1. js实现图片的Blob base64 ArrayBuffer 的各种转换

    一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. Fil ...

  2. js中关于Blob对象的介绍与使用

    js中关于Blob对象的介绍与使用   blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...

  3. Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景

    Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...

  4. 第一章 用three.js创建你的第一个3D场景

    第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...

  5. js中从blob提取二进制

    文章结构: 一.所遇到的问题 二.解决方法 一. 服务器端通过websocket向浏览器端传输图片(二进制),需要根据不同的图片把图片显示在不同的位置,可行的一个方法是先把图片转化成二进制数组,再把二 ...

  6. Node.js系列——(4)优势及场景

    背景 之前几篇系列文章简单介绍了node.js的安装配置及基本操作: Node.js系列--(1)安装配置与基本使用 Node.js系列--(2)发起get/post请求 Node.js系列--(3) ...

  7. JS闭包的理解及常见应用场景

    JS闭包的理解及常见应用场景 一.总结 一句话总结: 闭包是指有权访问另一个函数作用域中的变量的函数 1.如何从外部读取函数内部的变量,为什么? 闭包:f2可以读取f1中的变量,只要把f2作为返回值, ...

  8. 前端图片canvas,file,blob,DataURL等格式转换

    将file转化成base64 方法一:利用URL.createObjectURL() <!DOCTYPE html> <html> <head> <title ...

  9. 【Unity3D】场景转换与退出

    1.场景转换 : 老版本的场景切换用的是Application.LoadLevel([场景名字或者在File->Build settings里面的场景代号]); 新版本的场景转换用到了Scene ...

随机推荐

  1. json 报错415 400

    JS操作JSON总结   $(function(){ $.ajax({ method: 'post', url: '/starMOOC/forum/getSectionList', dataType: ...

  2. springmvc3.2集成redis集群

    老项目需要集成redis集群 因为spring版本才从2.x升级上来,再升级可能改动较大,且并非maven项目升级麻烦,故直接集成. jar包准备: jedis-2.9.0.jar  -- 据说只有这 ...

  3. 微信小程序 初阶

    公司最近安排要学习一下微信小程序的开发,大体看了看,幸亏还有点javascript的底子,学起来不至于太难,其它的语法什么的真需要好好适应适应....头大 从头开始看微信小程序开发的文档,目前来说没有 ...

  4. http/tcp/ip/端口

    http是www服务器和本地浏览器之间传输超文本的协议. 每一台机器都有一个属于自己的ip地址,计算机也需要知道是哪个程序来接受信息,这里也就引入了端口号,可以简单地理解每一个程序都有一个唯一的端口号 ...

  5. windows下安装jenkins初级(1)

    这里是基于Windows系统下安装Jenkins 首先下载jenkins 下载地址:https://jenkins.io/download/ 选择所需要的系统 我这里选择Windows 开始安装 一直 ...

  6. 每天进步一点点-Tesseract 文字识别

    Tesseract 文字识别 是github上的开源文字识别软件 下载与安装 https://github.com/tesseract-ocr/tesseract/wiki 下载 https://gi ...

  7. on windows in superset sql lab error "module object has no attribute sigalrm"

    改下  utils.py   文件 It works after doing the following change (sorry for the massed up alignment, prob ...

  8. 【NOI2019模拟2019.7.1】为了部落 (生成森林计数,动态规划)

    Description: \(1<=n<=1e9,1<=m,k<=100\) 模数不是质数. 题解: 先选m个点,最后答案乘上\(C_{n}^m\). 不妨枚举m个点的度数和D ...

  9. delphi directui 做界面的一个例子

    现在很多CS系统或者软件界面都做的非常好看,比如:QQ皮肤,迅雷下载,360杀毒界面等.这些都是运用的流行的DIRECTUI 技术,基本上有的资料都是基于C++的,很少有同仁将C++下的DIRECT ...

  10. 暑假集训test-8-30

    这套题有毒,T1标程挂了,T2题面完全莫名其妙,T3没有告诉取模害我打了好久高精... A题. 统计每个数后面比它小的数的个数记作f把,操作一个数就是把它后面所有比它小的数和它的f清0,然后若是它到它 ...