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

代码

(2019-8-21更新,加注释)

//将图片转换为Base64 
//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对象即可

相关文章

(2019-10-23更新加链接)
https://www.cnblogs.com/wangzhaobo/p/8962085.html