文件间的转换

m0_46643843

已于 2024-01-18 14:58:20 修改

阅读量730

点赞数 10

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

于 2023-12-11 16:29:08 首次发布

本文链接：https://blog.csdn.net/m0_46643843/article/details/134930179

版权

本文详细展示了如何通过AJAX请求获取URL内容并转换为File对象，以及如何使用FileReader处理canvas生成的图片URL并保存为本地文件。

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

将url地址转换成file对象

const getFileFromUrl = (url: any, fileName: any) => {
	return new Promise((resolve, reject) => {
		var blob = null
		var xhr = new XMLHttpRequest()
		xhr.open('GET', url)
		//此处类型依据具体情况设置
		xhr.setRequestHeader('Accept', 'image/jpeg')
		xhr.responseType = 'blob'//先将文件转成blob
		// 加载时处理
		xhr.onload = () => {
			// 获取返回结果
			blob = xhr.response
			//此处类型依据具体情况设置，同上
			let file = new File([blob], fileName, { type: 'image/jpeg' })
			// 返回结果
			resolve(file)
		}
		xhr.onerror = (e) => {
			reject(e)
		}
		// 发送
		xhr.send()
	})
}

 getFileFromUrl(Url, 'miniCode.jpg').then((res) => {//miniCode.jpg为文件名字
						file = res
						
					})

先将文件利用ajax请求转成blob类型，然后再将其变成file对象

file转url地址

image.src = URL.createObjectURL(file) //file为file文件

将canvas转成图片

const img = (file: any) => {
	//file为file文件
	return new Promise((resolve, reject) => {
		const reader = new FileReader()
		reader.onload = function (event) {
			const dataURL = event.target.result
			const image = new Image()
			image.src = URL.createObjectURL(file)//将file文件转成url地址

			image.onload = async () => {//必须在图片加载后进行
				const canvas = document.createElement('canvas')
				const context = canvas.getContext('2d')
				canvas.width = 635
				canvas.height = 850
				context.drawImage(image, 0, 0, 635, 850)
				resolve(dataURLtoFile(canvas.toDataURL('image/png'), 'image.png'))
			}
		}
		reader.readAsDataURL(file)
	})
}

const dataURLtoFile = (dataURL, filename) => {
	const arr = dataURL.split(',')
	const mime = arr[0].match(/:(.*?);/)[1]
	const bstr = atob(arr[1])
	let n = bstr.length
	const u8arr = new Uint8Array(n)
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n)
	}
	return new File([u8arr], filename, { type: mime })
}