data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....
报错是因为没有去除 data:image/png;base64,应只要后面的文件流
1. base64 ： 可以直接当作链接地址使用
| 1 |
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....
|
2. File 对象：
File{
lastModified: 1649490762164
lastModifiedDate: Sat Apr 09 2022 15:52:42 GMT+0800 (GMT+08:00) {}
name: "1649490762160-251.png"
size: 25748
type: "image/png"
webkitRelativePath: ""
[[Prototype]]: File
}
3. Blob 对象
| 1 2 3 4 5 |
Blob{
size: 25748
type: "image/png"
[[Prototype]]: Blob
}
|
除了base64 可以直接当作链接使用，File 对象和Bolb 对象也可以通过转换 成base64 直接使用，或者使用
window.URL.createObjectURL(File 对象或者Bolb 对象) 直接生成链接 : 类似：blob:null/22ec44b8-5864-4960-8ea8-a71a7e40bb63 所以：能直接当作链接是使用在这三者关系中有| 1 2 |
1. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....
2. blob:null/22ec44b8-5864-4960-8ea8-a71a7e40bb63
|
一：base64 转 Blob 对象
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//base64 转 Blob对象
/* base64: data:image/png;base64,iVB....
/* Blob：{...}
*/
function base64ToBlob(data) {
var arr = data.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
|
二： base64 转 File 对象
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** base64 转 File 对象
/* @param data base64
/* @param filename 自定义文件名
/* @return File 对象
*/
function base64ToFile(data, filename) {
var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
let suffixArr = mime.split("/")
if (suffixArr.length && !filename) {
let suffix = suffixArr[suffixArr.length - 1]
filename = new Date().getTime() + "-" + Math.floor((Math.random() * 10000)) + "." + suffix
}
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
|
三： File 对象，Blob 对象 转base64
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//blob ,File 对象 转 base64
function blobFileTobase64(blobFile) {
let reader = new FileReader()
reader.readAsDataURL(blobFile);
return new Promise((resolve, reject) => {
reader.onload = function () {
resolve(this.result)
}
reader.onerror = (err) => {
reject(err);
};
})
}
|
四： blob链接转 base64 :利用canvas.toDataURL的API转化成base64
| 1 2 |
blob:null/22ec44b8-5864-4960-8ea8-a71a7e40bb63 转为
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU....
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function urlToBase64(url, type = "image/png") {
return new Promise((resolve, reject) => {
let img = new Image()
img.src = url
img.onload = function () {
let canvas = document.createElement("canvas")
canvas.width = this.naturalWidth
canvas.height = this.naturalHeight
let ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0)
let result = canvas.toDataURL(type || 'image/png')
resolve(result)
}
img.onerror = function (err) {
reject(err)
}
})
}
|
五： 压缩图片：接收一个File/Blob 对象,返回的是一个base64
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/*
blobFile:file/blob 对象
option:{type:"image/jpeg",width:'',height:"",quality:0.92,scale:1}
*/
function compressImg(blobFile, option = {}) {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.onload = function () {
let img = new Image()
img.src = this.result
img.onload = function () {
console.log("原图片大小：", this.src.length);//这是base64 ，所以可以指定图片大小
let imgSize = this.src.length;
let targetSize = 100 * 1024;
if (imgSize <= targetSize) {
return resolve(this.src)
}
let canvas = document.createElement("canvas")
let ctx = canvas.getContext("2d")
//原图尺寸
let imgW = this.naturalWidth
let imgH = this.naturalHeight
//新图比例大小
let scale = option.scale || 1;
let ratio = imgW / imgH; //宽高比例
let targetW = option.width || imgW * scale
let targetH = option.height || imgH * scale
canvas.width = targetW
canvas.height = targetH
ctx.drawImage(img, 0, 0, targetW, targetH)
let fileType = blobFile.type || option.type || 'image/jpeg'
let quality = option.quality || 0.5
let result = canvas.toDataURL(fileType, quality)
console.log("压缩后：", result.length)
resolve(result)
}
}
reader.onerror = function () {
reject(new Error(`${blobFile} must is Blob or File 对象`))
}
reader.readAsDataURL(blobFile)
})
}
|