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
}