js 根据url 转换图片（base64）

最新推荐文章于 2025-06-11 15:08:45 发布

原创最新推荐文章于 2025-06-11 15:08:45 发布 · 3.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#url 转图片 #js url转换base64 #url 转换bese64 #图片转换

React 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种将图片转换为Base64编码的方法，通过使用JavaScript创建Image对象加载图片，然后利用canvas进行绘制并转换为Base64格式。此方法适用于前端开发中对图片进行编码的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function getBase64(url, callback) {
  var Img = new Image(),
    dataURL = '';
  Img.src = url + '?v=' + Math.random();
  Img.setAttribute('crossOrigin', 'Anonymous');
  Img.onload = function() {
    var canvas = document.createElement('canvas'),
      width = Img.width,
      height = Img.height;
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(Img, 0, 0, width, height);
    dataURL = canvas.toDataURL('image/jpeg');
    return callback ? callback(dataURL) : null;
  };
}

使用办法

let imgUrl=‘https://www.baidu.com/img/bd_logo1.png’
getBase64(imgUrl, dataURL => {
console.log(dataURL:就是base64了)
});