js 将图片链接转换成base64格式的简单实例

最新推荐文章于 2025-03-25 16:34:37 发布

anran_1211

最新推荐文章于 2025-03-25 16:34:37 发布

阅读量2.2k

点赞数

分类专栏：常见问题文章标签： canvas base64 图片转码

本文链接：https://blog.youkuaiyun.com/anran_1211/article/details/79217706

版权

常见问题专栏收录该内容

3 篇文章

订阅专栏

本文提供了一个简单的JavaScript实例，演示如何将图片链接转换为Base64编码。利用HTML5的Canvas API，可以方便地完成这个过程。

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

简单案例

<！DOCTYPE html>
<HTML>
<HEAD>
    <meta name =“viewport”content =“width = device-width”/>
    <title> jquery图片base64 </ title>
</ HEAD>
<BODY>
    <img src =“”id =“oImg”>  // src =转编码后的base64格式  
    <SCRIPT>
        函数convertImgToBase64（url，callback，outputFormat）{  //封装函数，传入参数第一个：图片的地址，第二个：转编码后的base64格式，第三个：可以不传 
            var canvas = document.createElement （'canvas'）， //创建画布  
                ctx = canvas.getContext（'2d'），
                img =新图片;
            img.crossOrigin ='Anonymous';
            img.onload = function（）{
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage（IMG，0,0）;
                var dataURL = canvas.toDataURL（outputFormat ||'image / png'）;
                callback.call（this，dataURL）;
                canvas = null;
            };
            img.src = url;
        }
        convertImgToBase64（'http://b.hiphotos.baidu.com/lvpics/w=1000/sign=0b3d6cc5ea50352ab16121086373faf2/8435e5dde71190ef4708f1adcd1b9d16fcfa60d4.jpg'，function（base64Img）{
            的console.log（base64Img）;  //编码后的 
            document.getElementsByTagName（'img'）[0] .src = base64Img;
        }）;
    </ SCRIPT>
    </ BODY>
</ HTML>