vue图片压缩,file/base64/blob/url各种格式转换
·
一、file格式图片压缩
1、base64转blob
2、blob转file
3、base64转file
4、图片file转Base64编码
5、图片url转Base64编码
//图片压缩
compressImg(file) {
var files
var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
var read = new FileReader()
read.readAsDataURL(file)
var that = this;
return new Promise(function(resolve, reject) {
read.onload = function(e) {
var img = new Image()
img.src = e.target.result
img.onload = function() {
// 默认按比例压缩
var w = this.width
var h = this.height
// 生成canvas
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
var base64
// 创建属性节点
canvas.setAttribute('width', w)
canvas.setAttribute('height', h)
ctx.drawImage(this, 0, 0, w, h)
if (fileSize < 1) {
// 如果图片小于一兆 那么不执行压缩操作
base64 = canvas.toDataURL(file['type'], 1)
} else if (fileSize > 1 && fileSize < 2) {
// 如果图片大于1M并且小于2M 那么压缩0.5
base64 = canvas.toDataURL(file['type'], 0.5)
} else {
// 如果图片超过2m 那么压缩0.2
base64 = canvas.toDataURL(file['type'], 0.2)
}
// 回调函数返回file的值(将base64编码转成file)
// 1.先转为 blob格式 file.content是此文件的base64格式
var blob = that.dataURLtoBlob(base64);
// 拿到文件名
var fileName = file.name;
// 2,在转为 file类型
var file_ys = that.blobToFile(blob,fileName);
//console.log("file1:",file_ys);
resolve(file_ys)
}
}
})
},
1、 base64转blob
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 });
},
2、blob转file
blobToFile(theBlob, fileName){
theBlob.lastModifiedDate = new Date(); // 文件最后的修改日期
theBlob.name = fileName; // 文件名
return new File([theBlob], fileName, {type: theBlob.type, lastModified: Date.now()});
},
3、base64转file
base64ToFile(urlData, fileName) {
let arr = urlData.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bytes = atob(arr[1]); // 解码base64
let n = bytes.length;
let ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new File([ia], `${this.imgData.bucketName}.png`, { type: mime });
},
4、图片file转Base64编码
imageToBase64 (file) {
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
console.log('file 转 base64结果:' + reader.result)
this.iconBase64 = reader.result
}
reader.onerror = function (error) {
console.log('Error: ', error)
}
}
5、图片url转Base64编码
getBase64(url, callback) {
var Img = new Image(),
dataURL = "";
Img.src = url + "?v=" + Math.random();
Img.setAttribute("crossOrigin", "Anonymous");
Img.onload = function () {
var canvas = document.createElement("canvas"),
width = Img.width,
height = Img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(Img, 0, 0, width, height);
dataURL = canvas.toDataURL("image/jpeg");
callback ? callback(dataURL) : null;
};
},
6、文件转blob地址
//获取
createFileFromPath(path).then((file) => {
console.log(file, "静态资源转file");
const url = URL.createObjectURL(file);
if (url) {}
});
//编译
createFileFromPath(path) {
return fetch(path)
.then((response) => response.blob()) // 将MP4文件转换为Blob
.then(
(blob) =>
new File([blob], path.split("/").pop(), { type: "video/mp4" })
); // 创建File对象
},
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)