Axios: get 요청에서 base64로 이미지를 변환하는 방법

이것은 StackOverflow에 대한 질문이라고 생각합니다.

솔루션을 검색하는 사람을 위해 다음 코드가 있습니다.

get('/getImg', {
    responseType: 'arraybuffer' 
})
.then(function(result) {
    console.log(_imageEncode(result.data))
})

function _imageEncode (arrayBuffer) {
    let u8 = new Uint8Array(arrayBuffer)
    let b64encoded = btoa([].reduce.call(new Uint8Array(arrayBuffer),function(p,c){return p+String.fromCharCode(c)},''))
    let mimetype="image/jpeg"
    return "data:"+mimetype+";base64,"+b64encoded
}

이것은 우리의 솔루션이었고 매력처럼 작동합니다.

return axios.get('http://example.com/image.png', { responseType: 'arraybuffer' })
      .then((response) => {
        let image = btoa(
          new Uint8Array(response.data)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
        );
        return `data:${response.headers['content-type'].toLowerCase()};base64,${image}`;
      });

이것이 작동하지 않는 이유는 axios가 모든 것을 json 객체에 저장하기 때문입니다. 바이너리를 json 객체에 넣을 수 없기 때문에 바이너리를 깨는 문자열로 변환합니다.

이것은 나를 위해 완벽하게 작동했습니다.

function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => new Buffer(response.data, 'binary').toString('base64'))
}

나와 같은 노드에 있고 v >= 6 을 사용하는 경우 변경 사항이 있으므로 Buffer.from 또는 이와 유사한 것을 사용해야 합니다.

function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => Buffer.from(response.data, 'binary').toString('base64'))
}

참조 안전 버퍼
new Buffer()' was deprecated since v6. Use 'Buffer.alloc()' or 'Buffer.from()' (use 'https://www.npmjs.com/package/safe-buffer' for '<4.5.0') instead

@sean-hill 이미지의 첫 번째 토큰을 얻을 수 없는 이유가 무엇인지 아십니까? 어떤 이유로 data:image/png;base64, 부분이 표시되지 않아 base64 데이터가 유효하지 않습니다.

나를 위한 이 작품

function getImage(imageUrl) {
var options = {
    url: `${imageUrl}`,
    encoding: "binary"
};
  return new Promise(function (resolve, reject) {
    request.get(options, function (err, resp, body) {
        if (err) {
            reject(err);
        } else {
            var prefix = "data:" + resp.headers["content-type"] + ";base64,";
            var img = new Buffer(body.toString(), "binary").toString("base64");
            //  var img = new Buffer.from(body.toString(), "binary").toString("base64");
            var dataUri = prefix + img;
            resolve(dataUri);
        }
    })
})
}

function getImage(imageUrl) {
var options = {
    url: `${imageUrl}`,
    encoding: "binary"
};

    request.get(options, function (err, resp, body) {
        if (err) {
            reject(err);
        } else {
            var prefix = "data:" + resp.headers["content-type"] + ";base64,";
            var img = new Buffer(body.toString(), "binary").toString("base64");
           //  var img = new Buffer.from(body.toString(), "binary").toString("base64");
            var dataUri = prefix + img;
        }
    })
}

return axios.get('http://site.com/img.png', { responseType: 'arraybuffer' })
  .then(response => `data:${response.headers['content-type']};base64,${btoa(String.fromCharCode(...new Uint8Array(response.data)))}`);

return axios.get('http://site.com/img.png', { responseType: 'arraybuffer' })
  .then(response => `data:${response.headers['content-type']};base64,${btoa(String.fromCharCode(...new Uint8Array(response.data)))}`);

노드 버전:

    return axios.get(url, { responseType: 'arraybuffer' }).then(res => {
      ;`data:${res.headers['content-type']};base64,${Buffer.from(String.fromCharCode(...new Uint8Array(res.data)), 'binary')
        .toString('base64')}`
    })

@voidpls
귀하의 방법은 오류를 유발합니다!
Uncaught RangeError: Maximum call stack size exceeded

그것은 원인
toa(String.fromCharCode(...new Uint8Array(response.data)))

이 사진을 시도 할 수 있습니다