引言
因为浏览器沙箱的存在,web端操作文件的限制比较多,只能进行一些简单的文件上传下载。对于编辑文件和文件转换感到苍白无力,但这并不代表说毫无办法。随着现代化浏览器的不断升级,也提供了一些好用强大的api可以间接操作文件,例如文本中的blob、canvas等等。
一、概念介绍
blob
: 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 readablestream 来用于数据操作。
blob 表示的不一定是javascript原生格式的数据。file 接口基于blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
dataurl
: 即前缀为 data: 协议的url,其允许内容创建者向文档中嵌入小文件。
data urls 由四个部分组成:前缀(data:)、指示数据类型的mime类型、如果非文本则为可选的base64标记、数据本身:data(base64),
file
: 通常情况下, file 对象是来自用户在一个 input 元素上选择文件后返回的 filelist 对象,也可以是来自由拖放操作生成的 datatransfer 对象,或者来自htmlcanvaselement 上的 mozgetasfile() api。
file 对象是特殊类型的 blob,且可以用在任意的 blob 类型的 context 中。比如:filereader, url.createobjecturl(), createimagebitmap(), 及 xmlhttprequest.send() 都能处理 blob 和 file。
canvas
: canvas api 提供了一个通过javascript和html的 canvas 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
二、相互转化
2-1. dataurl(base64) 转化成 blob(二进制)对象
function dataurltoblob(filedataurl) { let arr = filedataurl.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-2. file、blob 文件数据绘制到 canvas
// 思路:file, blob ——> dataurl ——> canvas function fileandblobtocanvas(filedataurl) { let img = new image() img.src = filedataurl let canvas = document.createelement('canvas') if(!canvas.getcontext) { alert('浏览器不支持canvas') return; } let ctx = canvas.getcontext('2d') document.getelementbyid('container').appendchild(canvas) img.onload = function() { ctx.drawimage(img, 0, 0, canvas.width, canvas.height) } }
2-3. file、blob 转化成 dataurl
filereader: 对象允许 web 应用程序异步读取文件(或原始数据缓冲区)内容,使用 file 或 blob 对象指定要读取的文件或数据。
function filetodataurl(file) { let reader = new filereader() reader.readasdataurl(file) // reader 读取文件成功的回调 reader.onload = function(e) { return reader.result } }
2-4. 从 canvas 中获取文件 dataurl
function canvastodataurl() { let canvas = document.createelement('canvas') let canvasdataurl = canvas.todataurl('image/png', 1.0) return canvasdataurl }
以上就是blob实现与file dataurl canvas相互转换示例的详细内容,更多关于blob与file dataurl canvas相互转换的资料请关注其它相关文章!