img对象，file对象，base64，canvas对象相互转换以及图片压缩

一、使用场景

首先想一想我们有哪些需求？大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；

二、常用方法

如上图所示，七个方法，基本覆盖了JS中大部分文件类型的转换与压缩，其中：

1、urltoImage

urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数，代码如下：

function urltoImage (url,fn){
  var img = new Image();
  img.src = url;
  img.onload = function(){
    fn(img);
  }
};

2、 imagetoCanvas

imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象，代码如下：

function imagetoCanvas(image){
  var cvs = document.createElement("canvas");
  var ctx = cvs.getContext('2d');
  cvs.width = image.width;
  cvs.height = image.height;
  ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
  return cvs ;
};

3、 canvasResizetoFile

canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法，包含一个 Blob 对象的参数;代码如下：

function canvasResizetoFile(canvas,quality,fn){
  canvas.toBlob(function(blob) {
    fn(blob);
  },'image/jpeg',quality);
};

这里的 Blob 对象表示不可变的类似文件对象的原始数据。 Blob 表示不一定是 JavaScript 原生形式的数据。 File 接口基于 Blob ，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待，其他更具体的用法可以参考MDN文档

4、canvasResizetoDataURL

canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个 dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量;代码如下：

methods.canvasResizetoDataURL = function(canvas,quality){
  return canvas.toDataURL('image/jpeg',quality);
};

其中的 toDataURL API可以参考MDN文档

5、 filetoDataURL

filetoDataURL(file,fn) 会将 File （ Blob ）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （ Blob ）类型文件; fn 为回调方法，包含一个 dataURL 字符串的参数;代码如下：

function filetoDataURL(file,fn){
  var reader = new FileReader();
  reader.onloadend = function(e){
    fn(e.target.result);
  };
  reader.readAsDataURL(file);
};

6、 dataURLtoImage

dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法，包含一个 Image 类型文件的参数，代码如下：

function dataURLtoImage(dataurl,fn){
  var img = new Image();
  img.onload = function() {
    fn(img);
  };
  img.src = dataurl;
};

7、 dataURLtoFile

dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象，其中 dataurl 参数传入一个 dataURL 字符串,代码如下：

function dataURLtoFile(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});
};

三、进一步封装

对于常用的将一个 File 对象压缩之后再变为 File 对象,我们可以将上面的方法再封装一下，参考如下代码：

function fileResizetoFile(file,quality,fn){
  filetoDataURL (file,function(dataurl){
    dataURLtoImage(dataurl,function(image){
      canvasResizetoFile(imagetoCanvas(image),quality,fn);
    })
  })
}

其中， file 参数传入一个 File （ Blob ）类型文件； quality 参数传入一个 0-1 的 number 类型，表示图片压缩质量； fn 为回调方法，包含一个 Blob 类型文件的参数。

它使用起来就像下面这样：

var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
  console.log(res);
  //拿到res，做出你要上传的操作；
})

ps：下面看下JS等比压缩图片的办法

function proDownImage(path,imgObj) { // 等比压缩图片工具
  //var proMaxHeight = 185;
  var proMaxHeight=300;
  var proMaxWidth = 175;
  var size = new Object();　
  var image = new Image();　
  image.src = path;　
  image.attachEvent("onreadystatechange",
  function() { // 当加载状态改变时执行此方法,因为img的加载有延迟
    if (image.readyState == "complete") { // 当加载状态为完全结束时进入
      if (image.width > 0 && image.height > 0) {
        var ww = proMaxWidth / image.width;
        var hh = proMaxHeight / image.height;　
        var rate = (ww < hh) ? ww: hh;
        if (rate <= 1) {　
          alert("imgage width*rate is:" + image.width * rate);
          size.width = image.width * rate;
          size.height = image.height * rate;
        } else {
          alert("imgage width is:" + image.width);　　
          size.width = image.width;　　
          size.height = image.height;　　　
        }　
      }
    }
    imgObj.attr("width",size.width);
    imgObj.attr("height",size.height);
  });
}

四、常用方法

file对象转base64

// file对象转base64var 
filetoDataURL = function(file,fn) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        fn(e.target.result);
    }}

base64转file对象

// base64转file对象var base64ImgtoFile = function(dataurl,filename="file") {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1]
        suffix = mime.split('/')[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename+"."+suffix, { type: mime });}

base64转blob

var base64Toblob = function(base64){ 
	var bstr = atob(base64),
	n = bstr.length,
	u8Arr = new Uint8Array(n);
	while(n--){
		u8Arr[n] = bstr.charCodeAt(n)
	}
	return new Blob([u8Arr])}

blob转url

URL.createObjectUrl(blob)

URL.createObjectUrl(blob)：这个方法便捷，且是同步的，但需要基于当前的内存，换句话说，这个url不能拿到其他页面使用。

let url = URL.createObjectUrl(blob)img.src = url

FileReader.readAsDataURL

FileReader.readAsDataURL(blob)：这个方法是异步的，转化成base64，可以放到其他页面使用。

let fr = new FileReader()fr.readAsDataURL(blob)fr.onload = function(e) {
	console.log(e.target.result)}

img对象，file对象，base64，canvas对象相互转换以及图片压缩_img base64-优快云博客

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

// canvas转dataURL：canvas对象、转换格式、图像品质 function canvasToDataURL(canvas, format, quality){     return canvas.toDataURL(format||'image/jpeg', quality||1.0); } // DataURL转canvas function dataURLToCanvas(dataurl, cb){     var canvas = document.createElement('CANVAS');     var ctx = canvas.getContext('2d');     var img = new Image();     img.onload = function(){         canvas.width = img.width;         canvas.height = img.height;         ctx.drawImage(img, 0, 0);         cb(canvas);     };     img.src = dataurl; } /*-----------------------------------------------------------------------*/ // image转canvas：图片地址 function imageToCanvas(src, cb){     var canvas = document.createElement('CANVAS');     var ctx = canvas.getContext('2d');     var img = new Image();     img.src = src;     img.onload = function (){         canvas.width = img.width;         canvas.height = img.height;         ctx.drawImage(img, 0, 0);         cb(canvas);     }; } // canvas转image function canvasToImage(canvas){     var img = new Image();     img.src = canvas.toDataURL('image/jpeg', 1.0);     return img; } /*-----------------------------------------------------------------------*/ // File/Blob对象转DataURL function fileOrBlobToDataURL(obj, cb){     var a = new FileReader();     a.readAsDataURL(obj);     a.onload = function (e){         cb(e.target.result);     }; } // DataURL转Blob对象 function dataURLToBlob(dataurl){     var arr = dataurl.split(',');     var mime = arr[0].match(/:(.*?);/)[1];     var bstr = atob(arr[1]);     var n = bstr.length;     var u8arr = new Uint8Array(n);     while(n--){         u8arr[n] = bstr.charCodeAt(n);     }     return new Blob([u8arr], {type:mime}); } /*-----------------------------------------------------------------------*/ // Blob转image function blobToImage(blob, cb){     fileOrBlobToDataURL(blob, function (dataurl){         var img = new Image();         img.src = dataurl;         cb(img);     }); } // image转Blob function imageToBlob(src, cb){     imageToCanvas(src, function (canvas){         cb(dataURLToBlob(canvasToDataURL(canvas)));     }); } /*-----------------------------------------------------------------------*/ // Blob转canvas function BlobToCanvas(blob, cb){     fileOrBlobToDataURL(blob, function (dataurl){         dataURLToCanvas(dataurl, cb);     }); } // canvas转Blob function canvasToBlob(canvas, cb){     cb(dataURLToBlob(canvasToDataURL(canvas))); } /*-----------------------------------------------------------------------*/ // image转dataURL function imageToDataURL(src, cb){     imageToCanvas(src, function (canvas){         cb(canvasToDataURL(canvas));     }); } // dataURL转image，这个不需要转，直接给了src就能用 function dataURLToImage(dataurl){     var img = new Image();     img.src = d;     return img; }