获取网络图片并上传服务器

直接上代码:

let imgUrl = "";//网络图片地址
this.imgToBase64(imgUrl).then(res=>{
	let fileName = `网络图片.png`;
	let imgFile = this.dataURLtoFile(res,fileName);
	//imgFile 就是图片的file对象
	
}).catch((err)=>{
	console.log("err:",err)
})
// 网络图片转Base64
imgToBase64(url){
	return new Promise((reslove, reject)=>{
		let canvas = document.createElement('canvas'),
		ctx = canvas.getContext('2d'),
		img = new Image();
		img.setAttribute('crossOrigin', '*');
		img.src = url+"?v="+Math.random();
		img.onload = () => {
			canvas.height = img.height;
		 	canvas.width = img.width;
		 	ctx.drawImage(img, 0, 0);
		 	let dataURL = canvas.toDataURL('image/png');
			reslove(dataURL);
		 	canvas = null;
		};
		img.onerror = (err)=>{
			reject();
		}
	})
},
//将base64转换为文件
dataURLtoFile(dataurl, filename) {
	var arr = dataurl.split(','),
		mime = arr[0].match(/:(.*?);/)[1],
		bstr = window.atob ? atob(arr[1]) : this.atob(arr[1]),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	try {
		return new File([u8arr], filename || "123." + mime.split("/")[1], {
			type: mime
		});
	} catch (ex) {
		var blob = new Blob([u8arr], {
			type: mime
		});
		blob.lastModifiedDate = new Date();
		blob.lastModified = Date.now()
		blob.name = filename || "123." + mime.split("/")[1];
		return blob;
	}
},
//base64解密(兼容ie9)
atob: function(s) { //解密
	s = s.replace(/\s|=/g, '');
	var cur,
		prev,
		mod,
		i = 0,
		result = [],
		base64hash = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
	while (i < s.length) {
		cur = base64hash.indexOf(s.charAt(i));
		mod = i % 4;

		switch (mod) {
			case 0:
				//TODO
				break;
			case 1:
				result.push(String.fromCharCode(prev << 2 | cur >> 4));
				break;
			case 2:
				result.push(String.fromCharCode((prev & 0x0f) << 4 | cur >> 2));
				break;
			case 3:
				result.push(String.fromCharCode((prev & 3) << 6 | cur));
				break;

		}

		prev = cur;
		i++;
	}

	return result.join('');
},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值