[JavaScript知识库]图片上传：url转base64

<template>
	<div class="mine">
		<img :src="base64" >
	</div>
</template>

<script>
	export default {
		data() {
			return {
				img:'https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Fd01373f082025aafd0b777bbc497aa6e024f1ab8.jpeg',
				base64:'',
			}
		},
		mounted() {
			this.getBas64(this.img).then(res=>{
				this.base64 = res;
				console.log(res);
			})
		},
		methods: {
			/**
			 * @description: 图片转base64
			 * @param {String} url 需要转换的图片原链接（http://....jpg）
			 * @param {String} outputFormat 转换出来的图片的类型（canvas支持jpg/png格式）
			 * @return: 返回图片对应的base64编码
			 */
			getBas64(url, outputFormat = "image/jpg") {
				return new Promise(function(resolve, reject) {
					let canvas = document.createElement("canvas");
					let ctx = canvas.getContext("2d");
					let img = new Image();
					img.crossOrigin = "";
			
					img.addEventListener("load", () => {
						canvas.height = img.height;
						canvas.width = img.width;
						ctx.drawImage(img, 0, 0);
						let dataURL = canvas.toDataURL(outputFormat);
						canvas = null;
						resolve(dataURL);
					});
					img.addEventListener("error", err => reject(err));
					img.src = url;
				});
			},
		},
	}
</script>