[JavaScript] 다른 서버에 있는 이미지 불러오기

[JavaScript] 서버에 있는 이미지 불러오기

---

다른 서버에 있는 이미지를 이미지 태그(또는 캔버스 등)에 사용하고 싶을 때,
아래와 같이 src에 경로를 입력하면 된다.
(입력된 경로는 자동으로 file:// 형식으로 변환되어 입력되어 보여지게 된다.)

<img src="//다른서버주소/파일.jpg">

 

하지만, PC에서 서버에 접근은 되지만 위와 같은 경우가 안 되는 경우,
파일을 찾아서 binary로 바꿔준 후 base64로 변환한 값을 src에 입력해 주면 된다.

const image = document.getElementById("img");
var src = "//다른서버주소/파일.jpg"

if (src.startsWith('\\\\') || src.startsWith('//')) { // 서버 파일인 경우
  const Buffer = require('buffer').Buffer
  const path = require('path')
  const fs = require('fs')

  const buf = fs.readFileSync(src)  // binary 형태로 반환됨
  const base64 = buf.toString('base64')
  src = `data:image/png;base64, ${base64}` // binary 를 base64 로 변환.
} 
image.src = src

 

 

 

---

[참고] stackoverflow