1.base64转blob(二进制数据)

/**
* 将以base64的图片url数据转换为Blob
* @param urlData 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var arr = urlData.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.blob转base64

/**
* 借助FileReader实现转化
* return base64Url
*/
function blobToDataURL(blob) {
let a = new FileReader();
a.onload = function (e) {
return e.target.result;
}
a.readAsDataURL(blob);
}

blob将图片以二进制数据的形式传给后台,据说是更加友好,我没有进行过多研究。

写在最后

  哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

相关推荐:

 

base64和Blob互相转换的更多相关文章

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

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

  2. js实现图片资源、blob、base64的各种场景转换

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

  3. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  4. python base64 编解码,转换成Opencv,PIL.Image图片格式

    二进制打开图片文件,base64编解码,转成Opencv格式: # coding: utf-8 import base64 import numpy as np import cv2 img_file ...

  5. Base64转Blob

    最近碰见一个问题,a链接的href为base64,但在chrome下载时显示下载失败,经查询,base64过大会在某些浏览器上下载失败(如新版chrome),解决方法是将base64转为blob fu ...

  6. PIL.Image与Base64 String的互相转换

    https://www.jianshu.com/p/2ff8e6f98257 PIL.Image与Base64 String的互相转换 mona_alwyn 2018.01.18 19:02* 字数 ...

  7. base64 和 Blob 相互转换

    Base64 to Blob function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/ ...

  8. 图片和base64编码字符串 互相转换,图片和byte数组互相转换

    图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; ...

  9. 图片预览(base64和blob:图片链接)和ajax上传、下载(带进度提示)

    直接上代码 html和js <!DOCTYPE html> <html> <head> <meta name="viewport" con ...

随机推荐

  1. 基础知识---const、readonly、static

    const:静态常量,也称编译时常量(compile-time constants),属于类型级,通过类名直接访问,被所有对象共享! a.叫编译时常量的原因是它编译时会将其替换为所对应的值: b.静态 ...

  2. Prometheus 一条告警的触发流程、等待时间

    Prometheus 一条告警的触发流程.等待时间 报警处理流程如下:1. Prometheus Server监控目标主机上暴露的http接口(这里假设接口A),通过上述Promethes配置的'sc ...

  3. What are regsvr32, regasm and gacutil using for?(转载)

    What are regsvr32, regasm and gacutil using for? Regasm.exe is used to create COM Callable Wrapper ( ...

  4. 25个特殊操作符(special operator)

    1. CLHS (Common-Lisp-Hyper-Spec) http://www.lispworks.com/documentation/HyperSpec/Body/03_ababa.htm ...

  5. linux centos无法删除网站根目录下的.user.ini解决办法

    .user.ini文件在执行rm -rf时,提示无法删除 解决办法 首先了解下chattr命令的作用:不让用户修改.删除文件等. -i选项:设定文件不能被删除.改名.设定链接关系,同时不能写入或新增内 ...

  6. PIE创建带压缩的栅格数据集

    这段时间我一直在研究如何用PIE创建带压缩的栅格数据集,由于我在比赛中使用的原始影像大小普遍都在300M以上,软件加载较慢,因此希望能对原始影像进行压缩,加快加载时间. 首先,该方法的关键是修改Dat ...

  7. Service Mesh服务网格新生代--Istio

    原文: 数人云|万字解读:Service Mesh服务网格新生代--Istio 参考: istio 简介 Istio是啥?一文带你彻底了解! 使用Istio治理微服务入门 Istio 流量管理 ist ...

  8. SpringIOC源码解析(下)

    注意,看完这篇文章需要很长很长很长时间... 本篇文章是SpringIOC源码解析(上)的续集,上一篇文章介绍了使用XML的方式启动Spring,然后追踪了BeanFactory容器的创建.配置文件的 ...

  9. Linq实现字符串拼接多条件查询

    Linq实现字符串拼接多条件查询 开发过程中,为提升用户体验,经常会使用到多条件查询,本篇博客介绍如何使用Linq实现字符串拼接多条件查询 一般SQL字符串拼接 1 string sql = &quo ...

  10. 学习笔记之UML ( Unified Modeling Language )

    Unified Modeling Language - Wikipedia https://en.wikipedia.org/wiki/Unified_Modeling_Language The Un ...