首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JS实现下载图片,JS实现把图片转成Base64

JS实现下载图片,JS实现把图片转成Base64

原创
作者头像
码农有梦
发布2025-08-13 13:28:33
发布2025-08-13 13:28:33
1440
举报
文章被收录于专栏:JavaScriptJavaScript

通过JavaScript脚本可以把远程的图片转换为Base64,通过JavaScript脚本可以把远程的图片下载到本地。

直接上代码:

代码语言:JavaScript
复制
//将远程图片转化为base64
function getBase64(img){
    function getBase64Image(img,width,height) {
        //width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
        var canvas = document.createElement("canvas");
        canvas.width = width ? width : img.width;
        canvas.height = height ? height : img.height;
 
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL();
        return dataURL;
    }
    var image = new Image();
    image.crossOrigin = '';
    image.src = img;
    return new Promise((resolve,reject)=>{
        image.onload =function (){
            resolve(getBase64Image(image));//将base64传给done上传处理
        }
    });
}
//把图片转换成base64
getBase64('https://iqiyi.yingchaow.mobi').then(base64 => {
    console.log(base64)
}, err => {
    console.log(err)
})
 
 
 
//下载远程图片
function downloadFile(url) { 
    var aLink = document.createElement('a');
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", false, false);
    aLink.download = url;
    aLink.href = url;
    aLink.dispatchEvent(evt);
}
 
downloadFile('https://qovd.yingchaow.mobi')

本文展示了如何使用JavaScript实现远程图片转换为Base64编码以及下载到本地的功能。通过创建canvas元素,将图片绘制到画布上并转换为Data URL,实现了Base64转换。同时,利用HTML5的a标签模拟点击事件,实现了图片的无插件下载。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档