vue url转file文件
这里只是简单的转换 需要解决跨域 当然没有跨域问题可以不解决如果需要其他需求可以自己封装//图片地址转base64格式imgToBase64(url,cb){var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d'),img = new Image;img.crossOrigin = 'Anonymous'
·
这里只是简单的转换 需要解决跨域 当然没有跨域问题可以不解决
如果需要其他需求可以自己封装
//图片地址转base64格式
imgToBase64(url,cb){
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL('image/png');
console.log(dataURL) //Base64 码 一般用这个就行
cb && cb(dataURL);
canvas = null;
};
img.src = url;
},
//base64转file对象
base64toFile(base, filename){
var arr = base.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var suffix = mime.split("/")[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
//转换成file对象
return new File([u8arr], `${filename}.${suffix}`, { type: mime });
},
//使用
this.imgToBase64(imgUrl,base =>{
let file = this.base64toFile(base,'图片')
})
自己封装的一版
methods写放法
//url 转file文件 方法待优化
imgToBase64(url) {
let img_name = url
.split("/")
[url.split("/").length - 1].substring(
0,
url.split("/")[url.split("/").length - 1].length - 4
); //获取图片名称
console.log(url.split("/")[url.split("/").length - 1]);
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
img = new Image();
img.setAttribute("crossOrigin", "*");
var dataURL = "";
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL("image/jpg");
// console.log(dataURL); //Base64 码 一般用这个就行
this.base64toFile(dataURL, img_name);
canvas = null;
};
img.src = url;
},
//base64转file对象
base64toFile(base, filename) {
var arr = base.split(",");
var mime = arr[0].match(/:(.*?);/)[1];
var suffix = mime.split("/")[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let URL = window.URL || window.webkitURL;
let obj = {
name: `${filename}.jpg`,
type: "image/jpg",
raw: new File([u8arr], `${filename}.${suffix}`, { type: mime }),
url: URL.createObjectURL(new File([u8arr], `${filename}.${suffix}`, { type: mime })),
};
this.fileList2.push(obj);
//转换成file对象
return new File([u8arr], `${filename}.${suffix}`, { type: mime });
},
//url 转file文件
//mounted调用
let img_list = [
"http://192.168.1.100:8081/img/login-left.7dc900e1.png",
"http://192.168.1.100:8081/img/1.03338c30.png",
];
for (let i = 0; i < img_list.length; i++) {
this.imgToBase64(img_list[i]);
}
更多推荐
已为社区贡献2条内容
所有评论(0)