js读取远程图片成为base64

最新推荐文章于 2025-07-09 13:29:07 发布

原创最新推荐文章于 2025-07-09 13:29:07 发布 · 1.2w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#base64 #图片 #javascript

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种将跨域图片转换为Base64字符串的方法。通过使用JavaScript创建图片对象并设置crossOrigin属性，确保图片可以被Canvas读取。完成加载后，利用Canvas将图片绘制出来，并获取其Base64格式的数据。

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

//前提是图片支持跨域访问。
getContentTxt = () =>{
    //新建图片
    let image = new Image();
    image.src = 'http://c2.xinstatic.com/f1/20170413/1559/58ef2fe4601f1835091.png';
    //解决canvas无法读取画布问题 
    image.setAttribute('crossOrigin', 'anonymous');
    //通加载图片完毕保证快速读取
    image.onload = () => {
        var base64 = this.getBase64Image(image);
        console.log(base64);
    }
    var content = this.aa.$txt.formatText();
    console.log(content);
}
 getBase64Image = (img) =>{
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    console.log(img)
    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();
    console.log(canvas)
    var dataURL = canvas.toDataURL("image/jpeg");
    return dataURL;
}