JS图片(文件)格式转换

url--->base64

将图片转换为base64位编码后，图片会跟随代码（html、css、js）一起请求加载，不会再单独进行请求加载,可以防止由于图片路径错误导致图片加载失败的问题;

转换思路: url -->img -->canvas -->base64

// url: 图片链接;
function urlToBase64(url) {

  let canvas = document.createElement('canvas')

  //getContext() :返回一个对象，该对象提供了用于在画布上绘图的方法和属性(canvas元素本身没有绘制能力);

  let ctx = canvas.getContext('2d')

  //通过构造函数创建一个图片实例， 定义Image对象的src: img.src="";相当于给浏览器缓存了一张图像对象;

  let img = new Image()

  let url = null

  //处理图片跨域问题;

  img.crossOrigin = 'Anonymous'

  //异步事件，确保获取完整图片;

  img.onload = function(){

    canvas.width = img.width

    canvas.height = img.height

    //drawImage():将图片绘制在canvas中;

    ctx.drawImage(img, 0, 0)

    //toDataURL():canvas对象的一种方法，用于将canvas对象转换为base64位编码;

    base64Res = canvas.toDataURL('image/png')

   // console.log("base64", base64Res);
   //base64,
  //data:image  /png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4XrS9WbBl13nft+48z
    canvas = null

  }

  img.src = url

}

base64--->blob

转换思路: base64 -->Unit8Array -->blob

//base64: 图片base64字符串,contentType: blob对象文件类型;
function base64ToBlob(base64, contentType) {
 //去掉base64格式图片的头部
 let arr = base64.split(",")
 //atob()方法数据解码
 let decodeRes = atob(arr[1])

 let len = decodeRes.length
 //创建一个包含len个元素的无符号整型数组
 let unit8Arr= new Uint8Array(len)

 while(len --){
 //返回指定位置的字符的Unicode 编码
  unit8Arr[len] = decodeRes.charCodeAt(len)

 }

 let blob = new Blob([unit8Arr], {type:contentType})

 let blobRes = {}
 //静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象；执行revokeObjectURL来释放
 blobRes.url = URL.createObjectURL(blob)

 blobRes.name = new Date().getTime() + ".png"

 //console.log("blobRes", blobRes);

 //obj:

 //name:1670222836090.png

//url:blob:null/2a7e2074-3e5a-4ebf-a786-930f741366c0

 return blobRes

}

blob--->base64

转换思路: FileReader -->base64

//blob: Blob对象

function blobToBase64 (blob) {

  //FileReader 文件读取

  let reader = new FileReader()

  reader.onload = function(e) {

    console.log(e.target.result);

    // result: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4XrS9WbBl13nft+48z/PUt"

  }

  // 读取后，result属性中将包含一个data:URL 格式的Base64字符串用来表示所读取的文件

  //FileReader.readAsDataURL返回包含很多字符的base64

  reader.readAsDataURL(blob)

}

base64--->file

转换思路: base64 -->Unit8Array -->file

// base64: base64格式字符串;filename： 文件名称或文件路径;contentType：file 对象的文件类型(如：'image/png');

function base64ToFile (base64, filename, contentType) {

  let arr = base64.split(",")

  let decodeRes = atob(arr[1])

  let len = decodeRes.length

  let unit8Arr = new Uint8Array(leng)

  while(len --) {

    unit8Arr[len] = decodeRes.charCodeAt(len)

  }

  // console.log(new File([unit8Arr], filename, {type:contentType}));

    //File:{name,size,type...}

  return new File(new File([unit8Arr], filename, {type:contentType}))

}

将canvas 导出图片

toDataURL 是将图片导出生成 base64 字符串；而 toBlob 是将图片导出生成二进制文件，处理速度会快很多; toDataURL 是同步执行，直接返回结果；而 toBlob 则是异步操作，接收一个回调函数，避免同步阻塞进程。

canvas--->base64

转换思路: canvas -->url -->base64 -->file

function canvasToBase64 () {

  let canvas = document.getElementsByTagName('canvas')

  //canvas的toDataURL():返回一个包含图片展示的data URL，默认格式为png

  let base64Res = canvas.toDataURL('image/png')

  return base64Res

}
//接下来调用`base64` -->`file`，上面有

canvas--->blob

转换思路: canvas -->url -->blob -->file

function canvasToBlob () {

  let canvas = document.getElementsByTagName('canvas')

  let blobRes

  //canvas的toDataURL():返回一个包含图片展示的data URL，默认格式为png

   canvas.toBlob((blob)=> {

    blobRes = URL.createObjectURL(blob)

    console.log("blobRes", blobRes);

   })

  return blobRes

}