img 格式相互转换 url, base64，blob, file

正常向后端传的文件就是file格式，存储到文件服务器

url -> base64 -> file

url -> blob -> file

url -> base64 -> blob -> file

url -> base64 canvas.toDataURL('image/type')

   urlToBase64 () {let me = this// 获取图片的typelet type = src.slice(src.lastIndexOf('.') + 1, src.length)var canvas = document.createElement('canvas');var img = document.createElement('img');// 设置可以跨域img.setAttribute('crossOrigin', 'anonymous')img.onload = function(e) {canvas.width = img.width;canvas.height = img.height;var context = canvas.getContext('2d');context.drawImage(img, 0, 0, img.width, img.height);document.body.append(canvas)let base64 = canvas.toDataURL('image/' + type)return base64}img.src = src;}

base64 -> blob new Blob(blobArr, {type: contentType})

    base64ToBlob (b64Data, contentType, sliceSize) {contentType = contentType || '';sliceSize = sliceSize || 512;var byteCharacters = window.atob(b64Data);// var byteCharacters  = b64Data;//该atob函数将base64编码的字符串解码为一个新字符串，其中包含二进制数据每个字节的字符。var byteArrays = [];for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {var slice = byteCharacters.slice(offset, offset + sliceSize);var byteNumbers = new Array(slice.length);//通过使用.charCodeAt字符串中每个字符的方法应用它来创建一个字节值数组。for (var i = 0; i < slice.length; i++) {byteNumbers[i] = slice.charCodeAt(i);}//将此字节值数组转换为实际类型的字节数组，方法是将其传递给Uint8Array构造函数。var byteArray = new Uint8Array(byteNumbers);byteArrays.push(byteArray);}//创建一个blob：包含此数据的URL，并将其显示给用户。var blob = new Blob(byteArrays, { type: contentType });return blob;}

base64 -> file new File(fileArr, filename, { type: contentType})

    //  base64 => filedataURLtoFile (dataurl, filename, src) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}let file = new File([u8arr], filename, {type:mime});return file },

url -> blob xhr.responseType = blob

   downFile (src) {let me = thisvar xhr = new XMLHttpRequest();xhr.open('GET', src);xhr.responseType = 'blob';   //二进制文件xhr.onload = function(){console.log(this.response, 'response')var filename = src.slice(src.lastIndexOf('.') + 1, src.length)// var arr = src.split(','), mime = arr[0].match(/:(.*?);/)[1];var blob = this.response;return blob;//blob转fileme.postImg(file, src)console.log('file', file)if(this.status === 200){var img = document.createElement('img');img.src = window.URL.createObjectURL(this.response);img.onload = function(){//图片加载完，释放一个URL资源.window.URL.revokeObjectURL(this.src);}document.body.appendChild(img);}}xhr.send();}

blob -> file

  blobToFile (blob, filename, contentType) {let file = new File([blob], filename, {type: contentType, lastModified: Date.now()});return file}

blob | file -> base64 // input接收文件的格式就是blob|file (new FileReader()).readAsDataURL
  fileToBase64 (file) {let a = new FileReader()a.readAsDataURL(file)a.onload = function (e){        let base64 = e.target.resultreturn base64 }}

img 格式相互转换 url, base64，blob, file相关推荐

文件格式相互转换（base64转File等）
前言:若项目中附件上传组件只能拿到文件的base64编码,而后台要的是File对象,在没办法使用其他上传组件的情况下,可以在拿到base64编码后转换成后台需要的格式. 附:图片转BASE64编码工具 ...
js 图片上传传给后台的几种格式，formData，base64，file，blob流
1. file格式创建formData来完成file上传 <input type="file" id="imgfile" name="pic& ...
图片base64，file,blob格式的相互转换，以及gif转base64
图片base64,file,blob格式的相互转换,以及gif转base64(第六点) 1.new Image()图片链接转base64 只能转化为普通的jpg/png图片.无法转化gif图 type ...
html5 文件转byte[],JS 文件base64、File、Blob、ArrayBuffer互转
二进制互转 1. file对象转base64let reader = new FileReader(); reader.readAsDataURL(file[0]) console.log(reade ...
js 获取图片url的Blob值并预览
js 获取图片url的Blob值并预览 1)使用 XMLHttpRequest 对象获取图片url的Blob值参考:https://www.cnblogs.com/tujia/p/6483255.h ...
Blob File
文章目录学习链接 Blob 创建演示分片演示 File input 手动拖拽 fetch 从后端获取流前端代码后端代码 window.showOpenFilePicker Fileread ...
Base64 转 File （附下载）
问题当需要下载已经上传的文件时,后端太烂不愿意做,就只传了base64,然后丢给我们,这时候应该怎么办,这里有两个解决方法 1.打一顿就好了 2.老实自己写吧... 解决 1.先吧base64转换为 ...
base64转file图片上传
在微信公众号开发过程中,有可能会碰到这种情况,手写签字生成图片,或者页面生成图片等等,然后需求是将图片上传,一般上述情况都是由canvas转成的图片,格式都是base64类型的图片,而我们的上传接口一 ...
将图片（路径）转换为Base64 和将base64转换为file类型
var image={/* 将图片(路径)转换为Base64 */getBase64FromImageURL(url, callback) {var canvas = document.createE ...

img 格式相互转换 url, base64，blob, file

正常向后端传的文件就是file格式，存储到文件服务器

url -> base64 -> file

url -> blob -> file

url -> base64 -> blob -> file

img 格式相互转换 url, base64，blob, file相关推荐

最新文章

热门文章