图片格式转换

最新推荐文章于 2024-08-28 09:52:01 发布

三155

最新推荐文章于 2024-08-28 09:52:01 发布

阅读量142

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/beloved_jodie/article/details/130113087

版权

该文详细介绍了如何使用JavaScript进行图片URL到Base64编码的转换，以及Base64编码回二进制文件流的过程。通过创建Image对象处理跨域问题，利用canvas进行绘制并转为数据URL，最后将数据URL转换为File对象。同时，文章还展示了使用ajax和FileReader读取blob数据并转换为Base64的方法。

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

图片路径转换为Base64

	imageUrlToBase64(imageUrl) {
	  let image = new Image() // 一定要设置为let，不然图片不显示
	  image.setAttribute('crossOrigin', 'anonymous') // 解决跨域问题
	  image.src = imageUrl +"&v=" + Math.random()
	  image.onload = () => {
	    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的字符串可能比不转换前的长！
	    this.base64toFile(dataURL)
	  }
	}

Base64转换为二进制文件流(binary)

	base64toFile (dataurl, filename = 'file') {
	  let arr = dataurl.split(',')
	  let mime = arr[0].match(/:(.*?);/)[1]
	  let suffix = mime.split('/')[1]
	  let bstr = atob(arr[1])
	  let n = bstr.length
	  let u8arr = new Uint8Array(n)
	  while (n--) {
	    u8arr[n] = bstr.charCodeAt(n)
	  }
	  let file = new File([u8arr], `${filename}.${suffix}`, {
	    type: mime
	  })
	  console.log(file)
	}

使用 ajax + FileReader

	 getBase64(imgUrl) {
	     let xhr = new XMLHttpRequest();
	     xhr.open('get', '/xxx.jpg', true);
	     // 重点1
	     xhr.responseType = 'blob';
	     xhr.onload = function() {
	         if (this.status == 200) {
	              //得到一个blob对象
	              let blob = this.response;
	              // 重点2
	              let oFileReader = new FileReader();
	              oFileReader.onloadend = function(e) {
	                  // 结果
	                  const base64 = e.target.result
	              };
	              oFileReader.readAsDataURL(blob);
	         }
	     };
	     xhr.send();
	},