直接上代码
//录音文件转base64
export function fileToBase64(audioFile, callback) {
var reader = new FileReader();
reader.onload = function (event) {
var data = event.target?.result?.split(",");
// console.log(data);
// decodedImageData = btoa(data[1]);
// var data1 = event.target?.result
callback(data[1]);
};
reader.readAsDataURL(audioFile);
}
// base64 转 二进制流(blob)
export function dataURLtoBlob(dataurl, type = "audio/wav") {
// console.log(dataurl);
// let str = "data:audio/wav;base64," + dataurl.slice(2)
// console.log(str);
let mime = type
// var arr = str.split(","),
// mime = arr[0].match(/:(.*?);/),
// let bstr = atob(arr[1])
let bstr = atob(dataurl)
let n = bstr.length
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime,
});
}
// =====================把base64编码转为文件对象==========================
// 第一个参数dataUrl是一个base64的字符串。第二个参数是文件名可以随意命名
export function base64toFile(dataurl, filename = 'file' + Date.now()) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
// suffix是该文件的后缀
let suffix = mime.split('/')[1];
// atob 对经过 base-64 编码的字符串进行解码
let bstr = atob(arr[1]);
// n 是解码后的长度
let n = bstr.length;
// Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0
let u8arr = new Uint8Array(n);
// charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
// 第三个参数是 要放到文件中的内容的 MIME 类型
return new File([u8arr], `${filename}.${suffix}`, {
type: mime,
});
}
//图片转base64
export function imgToBase64(file, callback) {
var reader = new FileReader();
reader.onload = function (event) {
var data = event.target?.result;
callback(data);
};
reader.readAsDataURL(file);
}
export const base64Tofile = (base64) => {
//将base64转换为blob
function dataURLtoBlob(dataurl) {
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);
}
return new Blob([u8arr], { type: mime });
}
//将blob转换为file
function blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
//调用
var blob = dataURLtoBlob("data:image/jpg;base64," + base64);
var file = blobToFile(blob, "1.jpg");
return file
}
//canvas将两张图片合成一张
export function drawAndShareImage(imgSrc1, imgSrc2, callback) {
//imgSrc1 背景图片(二维码)链接
const canvas = document.createElement("canvas");
const W = 345;
const H = 190;
canvas.width = W;
canvas.height = H;
const context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#fff";
context.fill();
const myImage = new Image();
myImage.src = imgSrc1; //背景图片 你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
myImage.onload = () => {
context.drawImage(myImage, 0, 0, W, H);
// 如果想要自由的合成图片,那就需要 重复的进行新建,逐个调整位置
const myImage2 = new Image();
myImage2.src = imgSrc2; //你自己本地的图片或者在线图片
myImage2.crossOrigin = 'Anonymous';
const w = 100;
const h = 100;
myImage2.onload = () => {
// 绘制图片 让图片在背景图片的中央
context.drawImage(myImage2, W / 2 - w / 2, H / 2 - h / 2, 100, 100);
const base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
callback(base64)
}
}
}