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

智数琉璃引
• 阅读 1387

通过JavaScript脚本可以把远程的图片转换为Base64,通过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('http://json.la/vx.jpg').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('http://json.la/vx.jpg')
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
QQ分享 QQ空间分享 API链接:
通过qq空间、qq聊天、新浪微博和微信二维码分享平台提供的接口,实现把网页中对应的图片、标题、描述的信息参数用javascript获取后传进接口中,实现一键分享。使用到的接口(测试时需要登录,网址和图片必须是公网的,不能是localhost):1.分享到QQ空间接口:https://sns.qzone.qq.com/cg
Easter79 Easter79
3年前
svg转png
svg转png网络上常用的方式有两种:1.直接转base64放到图片src进行显示,测试效果不佳,始终报方法问题。2.先转canvas,再转为png图,测试效果可以但svg透明背景到了canvas转换会变黑。推荐使用方法三:复制链接下载svg转png的jshttp://p8sv0x8g6.bkt.clouddn.com/saveSvgAs
Wesley13 Wesley13
3年前
UIWebView长按保存图片和识别图片二维码的实现方案(使用缓存)
0x00需求:长按识别UIWebView中的二维码,如下图长按识别二维码0x01方案1:给UIWebView增加一个长按手势,激活长按手势时获取当前UIWebView的截图,分析是否包含二维码。核心代码:略优点:流程简单,可以快速实现。不足:无法实现保存UIWebView中图片,如果当前We
浩浩 浩浩
4年前
【Flutter实战】图片和Icon
3.5图片及ICON3.5.1图片Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvi
Stella981 Stella981
3年前
PHP远程下载图片,微信头像存到本地,本地图片转base64
方法一(推荐):functiondownload_remote_pic($url){$header'UserAgent:Mozilla/5.0(WindowsNT6.1;Win64;x64;rv:45.0)Gecko/20100101Firefox/45.0',
Wesley13 Wesley13
3年前
JS调用摄像头并上传图片到服务器
本功能只能把图片转成base64码上传,如何上传图片还没有修改出来,有兴趣的朋友弄出来了,请给我留下言,谢谢了!直接上代码,需要的朋友直接复制就可以使用了。<!DOCTYPEhtml<html<headlang"en"<metacharset"UTF8"<title
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Python进阶者 Python进阶者
1年前
请问如何将带有斜纹水印pdf的转成Excel呢?
大家好,我是Python进阶者。一、前言前几天在Python最强王者交流群【wen】问了一个Python自动化办公的问题,问题如下:请问如何将带有斜纹水印pdf的转成Excel呢?目前我把pdf转成图片,根据水印的颜色进行清除,但是在脱网环境下无法将图片转
GeorgeGcs GeorgeGcs
1个月前
【HarmonyOS 5】ArrayBuffer转Base64,Base64转ArrayBuffer,Uri转ArrayBuff,PixelMap转ArrayBuffer,图片Uri转为PixelMap
【HarmonyOS5】ArrayBuffer转Base64,Base64转ArrayBuffer,Uri转ArrayBuff,PixelMap转ArrayBuffer,图片Uri转为PixelMap\鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类
智数琉璃引
智数琉璃引
Lv1
他年我若为青帝,报与桃花一处开。
文章
5
粉丝
0
获赞
0