JS 如何将“在线图片资源代码”转换成“base64”

最新推荐文章于 2025-02-23 15:18:23 发布

奋斗mt

最新推荐文章于 2025-02-23 15:18:23 发布

阅读量973

点赞数

CC 4.0 BY-SA版权

分类专栏：在线资源转成base64 文章标签： js img base64 canvas

原文链接：https://www.cnblogs.com/minigrasshopper/p/9042686.html?tdsourcetag=s_pcqq_aiomsg

在线资源转成base64 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种将图片转换为Base64编码的方法，通过使用HTML5的Canvas元素和JavaScript，可以轻松实现图片到Base64字符串的转换，便于在网络上传输和存储。

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

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); //在canvas中画图
var dataURL = canvas.toDataURL(“image/png”); //可选其他值 image/jpeg
return dataURL;
}

    function main(src, cb) {
        var image = new Image();
        image.src = src + '?v=' + Math.random(); // 处理缓存
        image.crossOrigin = "*";                 // 支持跨域图片
        image.onload = function() {
            var base64 = getBase64Image(image);
            cb && cb(base64);
        }
    }

    main('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2581919349,4180465790&fm=26&gp=0.jpg', function(base64) {
        console.log(base64);
    });