图片转base64

最新推荐文章于 2024-08-11 11:30:00 发布

青云码上

最新推荐文章于 2024-08-11 11:30:00 发布

阅读量164

点赞数

文章标签： javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_21363577/article/details/126104370

版权

两种方法

第一种

function getBase64(imgUrl) {
  var canvas = document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'),
      img = new Image;
    img.src = imgUrl;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL('image/png');
        console.log('dataURL: ', dataURL);
        return dataURL;
    };
}

第二种

function getBase64(imgUrl) {
  return new Promise(((resolve, reject) => {
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        var blob = this.response;
        let oFileReader = new FileReader();
        oFileReader.onloadend = function (e) {
          let base64 = e.target.result;
          resolve(base64)
        };
        oFileReader.readAsDataURL(blob);
      }
    }
    xhr.send();
  }))