全国热线

400-080-3312

全国监督投诉热线:9:00-23:00

HTML5 file对象和blob对象的互相转换

使用FileReader对象转换:File=>DataURL该对象用于读取文件(读取单个对象文件,所以,不能直接读取Filelist对象文件集合),即把文件内容读入内存。它接收File对象或Blob对象,作为参数。生成该对象的构造函数方法如下:var

  使用FileReader 对象转换:File => DataURL

  该对象用于读取文件(读取单个对象文件,所以,不能直接读取 Filelist 对象文件集合),即把文件内容读入内存。它接收 File 对象或 Blob 对象,作为参数。

  生成该对象的构造函数方法如下:

  var reader = new FileReader(); // 参数为 Blob 对象或 File 对象

  对于不同类型的文件,FileReader 使用不同的方法读取。方法如下:

  readAsBinaryString(Blob|File):返回二进制字符串,该字符串每个字节包含一个 0 到 255 之间的整数。

  readAsText(Blob|File, opt_encoding)

  :返回文本字符串。默认情况下,文本编码格式是’UTF-8’,可以通过可选的格式参数,指定其他编码格式的文本。

  readAsDataURL(Blob|File):返回一个基于 Base64 编码的 data-uri 对象。

  readAsArrayBuffer(Blob|File) :返回一个 ArrayBuffer(数组缓存)对象。

  abort():该方法用于中止文件上传。

  下面是获取上传对象的文本内容的方法:

  var reader = new FileReader();

  reader.onload = function(e){

  // target.result 该属性表示目标对象的DataURL

  console.log(e.target.result);

  }

  // 传入一个参数对象即可得到基于该参数对象的文本内容

  reader.rederAsDataURL(file);

  利用canvas剪切图片

  CanvasRenderingContext2D.drawImage() 是 Canvas 2D API 中的方法,它提供了多种方式来在Canvas上绘制图像,我们使用drawImage方法节剪切图片。

  先从canvas获取剪切过的图片DataURL

  // 获取canvas

  let ctx = this.$refs.canvas.getContext('2d')

  // 获取图片dom元素

  let image = this.$refs.image

  // 裁剪图片200 * 200图片

  ctx.drawImage(image, x, y, w, h, 0, 0, 200, 200)

  // canvas生成剪切过的图片DataURL

  this.cutAvater = this.$refs.canvas.toDataURL()

  将dataurl转换为Blob对象

  let arr = this.cutAvater.split(',')

  let data = window.atob(arr[1])

  let mime = arr[0].match(/:(.*?);/)[1]

  let ia = new Uint8Array(data.length)

  for (var i = 0; i < data.length; i++) {

  ia[i] = data.charCodeAt(i)

  }

  this.blob = new Blob([ia], {type: mime})

  利用File Api讲blob转成File对象

  其实我google找了一圈只有 File => Blob,没人写怎么用Blob => File

  最终我在File中找到了File()构造函数

  let files = new window.File([this.blob], file.name, {type: file.type})


上一篇:java中泛型是什么
下一篇:java三个综合知识点

相关推荐

免费试听 | 学费咨询 | 在线报名 | 申请补贴 | 软件培训 | 网站地图

2016-2020 南京学码思教育科技有限公司 .All Rights Reserved

苏ICP备16033487号 www.njxms.com.cn

全国热线

400-080-3312

全国监督服务热线:9:00-23:00