DataURL与File,Blob,canvas对象之间的互相转换的Javascript

最新推荐文章于 2025-07-01 14:03:50 发布

转载最新推荐文章于 2025-07-01 14:03:50 发布 · 5.6k 阅读

文章标签：

#js

js 专栏收录该内容

5 篇文章

订阅专栏

--------图片上传相关转换----------

1.dataUrl 转换成 file

  dataUrlToFile(
  dataurl){
 
  let filename
  =
  this.curImgName;
 
  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);
 
   }
 
  let file 
  =new 
  File([u8arr], filename, {type:mime});
 
   // var fd = new FormData(document.getElementById('imgUpload')); 
  
   // fd.set('imgFile',file);
  
   // this.compressedFile = fd;
  
   } 
  //压缩end

  dataToBlob(data){

    data 
   = data.
   split(
   ',')[
   1]; 
   //dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了 
  
    data 
   = window.
   atob(data); 
   // decode the string 
  
   var ia 
   = 
   new 
   Uint8Array(data.length); 
  
   for (
   var i 
   = 
   0; i 
   < data.length; i
   ++) { 
  
    ia[i] 
   = data.
   charCodeAt(i); 
  
    }; 
  
   //canvas.toDataURL 返回的默认格式就是 image/png 
  
   var blob 
   = 
   new 
   Blob([ia], { 
  
    type: 
   "image/jpeg" 
  
    }); 
  
   console.
   log(
   '二进制流',blob); 
  
   // var fd = new FormData(document.getElementById('imgUpload')); 
  
   // fd.set('imgFile',blob);
  
   // this.compressedFile = fd;
  
   // console.log('压缩完file', this.compressedFile,'file',fd.get('imgFile'));
  
    },

-----------------------以下为转载--------------------------------

canvas转换为dataURL (从canvas获取dataURL)

var dataurl = canvas.toDataURL('image/png');
var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);

File对象转换为dataURL、Blob对象转换为dataURL

File对象也是一个Blob对象，二者的处理相同。

function readBlobAsDataURL(blob, callback) {
    var a = new FileReader(); a.onload = function(e) {callback(e.target.result);}; a.readAsDataURL(blob); } //example: readBlobAsDataURL(blob, function (dataurl){ console.log(dataurl); }); readBlobAsDataURL(file, function (dataurl){ console.log(dataurl); });

dataURL转换为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}); } //test: var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');

dataURL图片数据绘制到canvas

先构造Image对象，src为dataURL，图片onload之后绘制到canvas

var img = new Image();
img.onload = function(){ canvas.drawImage(img); }; img.src = dataurl;

File,Blob的图片文件数据绘制到canvas

还是先转换成一个url，然后构造Image对象，src为dataURL，图片onload之后绘制到canvas

利用上面的 readBlobAsDataURL 函数，由File,Blob对象得到dataURL格式的url，再参考 dataURL图片数据绘制到canvas

readBlobAsDataURL(file, function (dataurl){
    var img = new Image(); img.onload = function(){ canvas.drawImage(img); }; img.src = dataurl; });

不同的方法用于构造不同类型的url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍，仅以dataURL为例。

filesystemURL不是指本地文件URL的形式(file:///….), 而是格式类似于 filesystem:http://... 的一种URL，支持沙盒文件系统的浏览器支持(目前仅Chrome)支持。

Canvas转换为Blob对象并使用Ajax发送

转换为Blob对象后，可以使用Ajax上传图像文件。

先从canvas获取dataurl, 再将dataurl转换为Blob对象

var dataurl = canvas.toDataURL('image/png');
var blob = dataURLtoBlob(dataurl);
//使用ajax发送
var fd = new FormData(); fd.append("image", blob, "image.png"); var xhr = new XMLHttpRequest(); xhr.open('POST', '/server', true); xhr.send(fd);

转载请保留来源 http://blog.youkuaiyun.com/cuixiping/article/details/45932793