img图片转base64格式方法

今天午睡了吗_X

已于 2022-09-02 17:05:07 修改

阅读量1.1k

点赞数

文章标签： javascript 前端开发语言

于 2022-09-02 17:04:17 首次发布

本文链接：https://blog.csdn.net/rwerewbt/article/details/126667013

版权

该代码段提供了一个JavaScript函数base64TransformByURL，用于将输入的图片URL转换为Base64格式的字符串。它通过创建一个canvas元素，绘制图片到canvas上，然后利用toDataURL方法将图片转化为Base64。为了处理跨域问题，设置了image对象的crossOrigin属性。此函数返回一个Promise，当图片加载完成后，解析并返回Base64编码。

摘要由CSDN通过智能技术生成

传入正确的图片链接会处理成base64格式的地址返回出去

base64TransformByURL(url) {
				let that = this
				function getBase64Image(image) {
					var canvas = document.createElement("canvas")
					canvas.width = image.width
					canvas.height = image.height
					var context = canvas.getContext('2d')
					context.drawImage(image, 0, 0, image.width, image.height)
					var quality = 0.8
					var dataURL = canvas.toDataURL("image/jpeg",
						quality) // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
					return dataURL;
				}
				return new Promise(function(resolve, reject) {
					const image = new Image();
					image.setAttribute('crossOrigin', 'anonymous') // 解决跨域问题
					image.src = url + "?v=" + Math.random()
					image.onload = function() {
						resolve(getBase64Image(image));
					}
			
				})
			
			},