用 canvas.toDataURL() 将图片转为Base64编码时避免跨域报错的方法【避坑】-爱代码爱编程
用 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>
步骤：
选择图片后，先获取一个file域，然后用URL.createObjectURL() 方法生成一个指向该域的blob（相当于临时URL），将其赋值给图片的src属性，接着绘图编码就行了。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接： https://blog.csdn.net/ZXF_BW/article/details/111101047