用 canvas.toDataURL() 将图片转为Base64编码时避免跨域报错的方法【避坑】

最新推荐文章于 2024-10-05 12:24:55 发布

ZXF-BW

最新推荐文章于 2024-10-05 12:24:55 发布

阅读量2.6k

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/ZXF_BW/article/details/111101047

版权

用 canvas.toDataURL() 将图片转为Base64编码时避免跨域报错的方法【避坑】

梗概

本文主要介绍canvas.toDataURL()将图片转为Base64编码时避免跨域的两种方法：

1、搭建服务器，将HTML文件和图片挂在服务器上使两者位于同一域下（较麻烦）；

2、用 URL.createObjectURL() 方法创建一个指向file域的blob（相当于临时URL），再将blob作为图片的URL就能对图片进行base64编码了（简单快捷）。

一、具体报错信息：

直接在本地执行用于Base64编码的HTML文件会出现以下错误：

Access to image at ‘file:///C:/Users/ZXF/Desktop/timg.jpg?timeStamp=Sun%20Dec%2013%202020%2009:40:29%20GMT+0800%20(%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4)’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

或者如下图：
具体报错

二、报错原因：

这是浏览器为了保证数据的安全，对跨域（在这里指网址和图片地址不在同一个域下传输）的限制。网上有很多描述，在此不再赘述。

三、解决方法：

方法一：搭建服务器（较麻烦）

思路：将你的网站和图片挂在服务器上，从而使得网址和图片地址位于同一个域下（既然浏览器不允许跨域，那就不跨域）。

具体实现：

（1）以Nginx搭建服务器为例，首先将HTML文件及图片放在nginx的根目录下

在这里插入图片描述

（3）运行nginx搭建服务器

（4）浏览器打开 http://127.0.0.1/图片Base64编码.html 或 http://localhost/图片Base64编码.html ，当然你也可用你的域名或公网IP+/图片Base64编码.html 访问

图片编码成功
至此编码成功，成功避坑！

附HTML中的代码:

<!DOCTYPE html>
<html>
<head>
	<title>图片Base64编码</title>
	<meta charset='utf-8'>
</head>
<body>
	<script>
		var img = new Image()
		img.src = 'timg.jpg'
		img.onload = function() {	// onload事件确保图片加载完成后再执行转换任务
		    var canvas = document.createElement('canvas')
		    canvas.width = img.width
		    canvas.height = img.height
		    canvas.getContext("2d").drawImage(img, 0, 0)
		    let base64 = canvas.toDataURL()
		    console.log(base64)  // 在控制台输出 Data URI
		    let showImg = document.createElement('img')	// 图片展示
		    showImg.src = base64
		    document.getElementsByTagName('body')[0].appendChild(showImg)
		}
	</script>
</body>
</html>

方法二：使用 URL.createObjectURL() 方法

使用URL.createObjectURL(object) 免去搭建服务器

先上代码！

<!DOCTYPE html>
<html>
<head>
	<title>图片Base64编码</title>
	<meta charset='utf-8'>
</head>
<body>
	<input type='file' onchange="base64Encode()" id="inputImg">
	<img src="" id="showImg">
	<script>
		function base64Encode() {
			let img = new Image()
			let imgObj = document.getElementById('inputImg').files[0]	// 获取file域
			img.src = URL.createObjectURL(imgObj)	// 将file的blob作为图片的URL
			img.onload = function() {	// onload事件确保图片加载完成后再执行转换任务
			    let canvas = document.createElement('canvas')
			    canvas.width = img.width
			    canvas.height = img.height
			    canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height)
			    let base64 = canvas.toDataURL()
			    console.log(base64)  // 在控制台输出 Data URI
			    document.getElementById('showImg').src = base64 	// 图片展示
			}
		}
	</script>
</body>
</html>