JavaScript 使用 Canvas 将图片路径转换为 Base64 编码

作者：清欢时间：2026-10-22 11:48:17浏览：319

本文介绍如何利用 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 浏览器中运行上述代码，结果展示如下。

使用 Canvas 转换图片为 Base64

本地图片处理与跨域问题

经排查发现，由于引用的是淘宝服务器上的图片，而在本地服务器环境下访问时触发了浏览器的跨域安全策略。解决该问题的最简单方式是将图片资源部署到本地服务器中，通过本地路径访问即可避免跨域限制，相关代码如下。


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 浏览器中仍不支持该跨域读取方式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JS转整数出现NaN怎么办？常见异常处理方案

2026-11-05 16:27:31

推荐几款免安装的在线JS压缩工具

2026-11-05 14:54:53

JS怎么使用JSON.stringify实现JSON格式化与缩进

2026-11-04 10:47:30

CodePen、JSFiddle 与 StackBlitz：主流 JS 在线编辑器对比

2026-11-03 21:07:49

JS字符串转数字后怎么正确判断是否为有效数值

2026-11-03 20:04:15