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. 并行 Webclient(一)

    在 Stackoverflow 上看到了一个提问,关于并行的 WebClient,觉得回答者的代码很有参考性,下面记录一下,以便日后用到: 提问者: 我有一个功能基本上分为两个子功能. html=Re ...

  2. python--unittest测试框架

    unittest中最核心的四个概念是:test case, test suite, test runner, test fixture

  3. WebStrom安装Markdown插件

    安装步骤 File→Settings→Plugins→关键字搜索markdown→选择Markdown Navigator→点击Install→出现下载弹窗,等待下载完毕→重启Webstrom 效果预 ...

  4. SoapException: Timed out while processing web services request

    情形:动态调用WebService时,语句method.Invoke异常. 异常信息为调用目标发生异常,从异常信息并不能看出问题所在,需要查看InnerException,如标题所述:处理web请求超 ...

  5. python高级编程——线程和线程池

    线程模块           线程的特点:                本质上是异步的.需要多个并发活动.每个活动的处理顺序可能是不确定的.或者说是随机的,不可预测的,宏观上是同时运行的       ...

  6. Angular4项目运行时URL自动加#方法

    import {HashLocationStrategy , LocationStrategy} from '@angular/common'; @NgModule({   declarations: ...

  7. TinyMCE入门

    引入TinyMCE脚本 <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" ...

  8. c#打开颜色对话框

    用button时间 调出颜色对话框来: private void btnForeColor_Click(object sender, EventArgs e)        {            ...

  9. Es6学习指南-1-函数变量

    本篇章我们简述的是 es6初级知识点,认识es6,以及es6变量和es5的变量和函数. ECMAScript  6简介 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代 ...

  10. django framework插件使用1

    安装 REST框架要求以下内容: Python(3.5.3.6.3.7) Django(1.11.2.0.2.1.2.2) pip install djangorestframework pip in ...