JS图片(文件)格式转换

2023-03-23 22:56| 来源: 网络整理| 查看: 265

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 }

【本文地址】

JS图片(文件)格式转换

JS图片(文件)格式转换

今日新闻

推荐新闻