js,JQ 图片转换base64 base64转换为file对象,blob对象

//将图片转换为Base64 --2019-8-21更新,加注释

//url 图片链接或者是blob对象

//callback 回调函数

function getImgToBase64(url,callback){

  var canvas = document.createElement('canvas');

  var ctx = canvas.getContext('2d');

  var img = new Image;//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染

  img.crossOrigin = 'Anonymous';
  //要先确保图片完整获取到，这是个异步事件

  img.onload = function(){

    canvas.height = img.height;//确保canvas的尺寸和图片一样

    canvas.width = img.width;

    ctx.drawImage(img,0,0);//将图片绘制到canvas中

    var dataURL = canvas.toDataURL('image/png');//转换图片为dataURL,传第二个参数可压缩图片,前提是图片格式jpeg或者webp格式的

    callback(dataURL);//调用回调函数

    canvas = null;

  };

  img.src = url;

}

//将base64转换为文件对象

function dataURLtoFile(dataurl, filename) {

  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);

  }

  //转换成file对象

  return new File([u8arr], filename, {type:mime});

  //转换成成blob对象

  //return new Blob([u8arr],{type:mime});

}

//将图片转换为base64,再将base64转换成file对象

getImgToBase64('images/ruoshui.png',function(data){

　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');

　　　console.log(myFile);

});

toDataURL函数说明(可以压缩图片) --2019-8-21添加

canvas.toDataURL(type, encoderOptions);

   type 可选

　　     图片格式，默认为 image/png

   encoderOptions 可选

　　     在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略

参考网址:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

上传图片的时候只需要将File对象或者Blob对象追加到FormData对象即可 ( 相关文章： https://www.cnblogs.com/wangzhaobo/p/8962085.html );2019-10-23更新加链接

有不懂的地方可以留言, 或者联系博主.

js,JQ 图片转换base64 base64转换为file对象,blob对象的相关教程结束。