本文介绍如何利用 HTML5 Canvas 的 toDataURL 方法，将本地或远程图片路径转换为 Base64 编码字符串。针对跨域访问导致的权限问题，提供了设置 image.crossOrigin 属性的解决方案，并测试了 Chrome、Firefox 及 Safari 浏览器的兼容性表现。
使用 Canvas 转换图片为 Base64
利用 Canvas 对象的 toDataURL 方法，可以将图片的绝对路径转换为 Base64 编码格式。以下示例引用了淘宝首页的一张图片作为演示素材。
具体实现代码如下：
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";基于上述变量，编写完整的转换逻辑如下：
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
var image = new Image();
image.src = img;
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
}在 Chrome 浏览器中运行上述代码，结果展示如下。
本地图片处理与跨域问题
经排查发现，由于引用的是淘宝服务器上的图片，而在本地服务器环境下访问时触发了浏览器的跨域安全策略。解决该问题的最简单方式是将图片资源部署到本地服务器中，通过本地路径访问即可避免跨域限制，相关代码如下。
var img = "http://127.0.0.1/base64/1.jpg";
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
var image = new Image();
image.src = img;
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
}
跨域图片的解决方案
若需直接引用其他服务器（跨域）的图片，可以通过设置 image 对象的 crossOrigin 属性来解决。该方案在 Chrome 和 Firefox 浏览器中有效，但在 Safari 6 及以下版本中可能不被支持。关键代码如下：
image.crossOrigin = '';整合上述逻辑的完整代码如下：
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
//var img = "http://127.0.0.1/base64/1.jpg";
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
}
经测试，上述完整代码在 Chrome 和 Firefox 浏览器中运行正常，但在当前版本的 Safari 浏览器中仍不支持该跨域读取方式。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。