base64

[Django][RestAPI] Image Path로 서버에 이미지 업로드하기 서버에서는 사용자 PC에 있는 이미지의 경로만 갖고 해당 위치의 이미지를 서버로 복사(이동)할 수 없다. 파일 열기(불러오기)기능을 하는 을 이용하면 가능하지만, JS에서 서버로 넘긴 path만으로는 Chrome에서 사용자 PC에 접근을 막았기(fakepath, Chrome보안정책) 때문에 불가능했다. Electron(NodeJS)에서 서버로 RestAPI(Django Rest FrameWork)를 통해서 이미지 경로만 갖고 여러 개의 이미지를 한번에 전송하려면 base64로 인코딩(encode/encoding)한 값을 서버로 전달 한 후 서버에서 base64를 이미지로 디코딩(decode/decoding)해주면 된다. 먼저,..

[JavaScript] 서버에 있는 이미지 불러오기 다른 서버에 있는 이미지를 이미지 태그(또는 캔버스 등)에 사용하고 싶을 때, 아래와 같이 src에 경로를 입력하면 된다. (입력된 경로는 자동으로 file:// 형식으로 변환되어 입력되어 보여지게 된다.) 하지만, PC에서 서버에 접근은 되지만 위와 같은 경우가 안 되는 경우, 파일을 찾아서 binary로 바꿔준 후 base64로 변환한 값을 src에 입력해 주면 된다. const image = document.getElementById("img"); var src = "//다른서버주소/파일.jpg" if (src.startsWith('\\\\') || src.startsWith('//')) { // 서버 파일인 경우 const Buffer = req..

[Electron] img 태그 src="file://~" 경로에 존재하는 파일이 로드되지 않는 경우 해결 방법 1. 오류 WebRoot 경로 및 하위 폴더에 존재하는 이미지는 상대 경로로 입력하여 이미지를 불러올 수 있지만, 로컬에 존재하는 파일 또는 다른 서버에 존재하는 파일을 로드할 경우, 절대 경로로 입력해 주어야 한다. C:/나 D:/ 등 마운트된 디렉토리는 정상적으로 접근해서 이미지를 로드했지만, 외부(다른) 서버에 존재하는 파일을 파일은 존재한다고 출력은 되나, 이미지를 불러오지 못했다. 아래 코드를 실행해 보면 image1은 이미지가 보이지만, image2는 이미지가 보이지 않았다. const fs = require("fs"); var image1 = document.createElemen..