js 将远程图片转化为base64及下载远程图片

原创
2018/02/23 16:27
阅读数 1.4W

code

//将远程图片转化为base64
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上传处理
        }
    });
}

getBase64('http://xxx.com/xx.jpg').then(base64 => {
    console.log(base64)
}, err => {
    console.log(err)
})

//下载远程图片
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://xxx.com/xx.jpg')
展开阅读全文
打赏
2
2 收藏
分享
加载中
谷歌浏览器在图片比较大的时候不支持 怎么解决
2019/01/23 16:59
回复
举报
能解决大图不能下载的问题吗?
2019/01/22 10:13
回复
举报
第一个问题没有 但是大图确实是不能下载 500k的图
2019/01/21 21:51
回复
举报

引用来自“喜城”的评论

为啥我这是点击后跳到新页面打开图片呢
大图不能下载 小图可以
2019/01/21 21:50
回复
举报
为啥我这是点击后跳到新页面打开图片呢
2019/01/21 21:38
回复
举报
更多评论
打赏
5 评论
2 收藏
2
分享
返回顶部
顶部