js 根据图片URL转base64格式

1.情景展示

如果根据获取的图片的网络请求，将图片转成BASE64格式？

2.具体分析

  通过创建图片对象Image和创建画布canvas来实现。

3.解决方案

/**
 * 将图片地址转换为 base64 格式
 * @param url 图片网络地址
 */
function convertImgUrlToBase64(url) {
    return new Promise(function (resolve, reject) {
        var img = new Image();
        // 允许跨域，如果，网络请求涉及跨域的话，服务器端也需要设置允许跨域才有效。
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = function () {
          var base64 = getBase64Image(img);
          // 将值塞到这里面，后续可通过then取的结果
          resolve(base64);
        };
    });
}

getBase64Image()方法，在《js 将图片文件转换成base64》一文中，具体见文末推荐。

4.测试

let url = "https://pic1.zhimg.com/v2-b812f880f9e516cab67ae93cd04fc204_1440w.jpg";
// 调用
convertImgUrlToBase64(url).then(function(base64) {
    $('body').append('<img src="' + base64 + '">');
})

 

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

 相关推荐：

• 个人主页
• js 将图片文件转换成base64