[Django][RestAPI] Image Path로 서버에 이미지 업로드하기 서버에서는 사용자 PC에 있는 이미지의 경로만 갖고 해당 위치의 이미지를 서버로 복사(이동)할 수 없다. 파일 열기(불러오기)기능을 하는 을 이용하면 가능하지만, JS에서 서버로 넘긴 path만으로는 Chrome에서 사용자 PC에 접근을 막았기(fakepath, Chrome보안정책) 때문에 불가능했다. Electron(NodeJS)에서 서버로 RestAPI(Django Rest FrameWork)를 통해서 이미지 경로만 갖고 여러 개의 이미지를 한번에 전송하려면 base64로 인코딩(encode/encoding)한 값을 서버로 전달 한 후 서버에서 base64를 이미지로 디코딩(decode/decoding)해주면 된다. 먼저,..
image
[JavaScript] 서버에 있는 이미지 불러오기 다른 서버에 있는 이미지를 이미지 태그(또는 캔버스 등)에 사용하고 싶을 때, 아래와 같이 src에 경로를 입력하면 된다. (입력된 경로는 자동으로 file:// 형식으로 변환되어 입력되어 보여지게 된다.) 하지만, PC에서 서버에 접근은 되지만 위와 같은 경우가 안 되는 경우, 파일을 찾아서 binary로 바꿔준 후 base64로 변환한 값을 src에 입력해 주면 된다. const image = document.getElementById("img"); var src = "//다른서버주소/파일.jpg" if (src.startsWith('\\\\') || src.startsWith('//')) { // 서버 파일인 경우 const Buffer = req..
[JavaScript] image refresh 오류 웹에서 같은 url(src)를 갖는 이미지를 재로드 하면 변경된 이미지가 아닌 변경 전 즉, 이전 이미지를 불러온다. 예를들어, A라는 이미지를 웹에서 불러온 후, A 이미지를 바꿀 경우. 전체 페이지를 새로고침하거나 웹을 재시작하지 않고, 이미지만 부분 새로고침 할 경우 A 이미지는 변경된 이미지가 아닌 이전 이미지가 보여진다. 아마 캐시에 쌓아둔 듯 하다. 처음엔 Electron 언어 자체의 문제인줄 알고, 아래와 같이 cache를 삭제해 보았지만 효과가 없었고, console로 cache를 확인해 보니 캐시는 항상 비워져 있었다. var remote = require('remote'); var win = remote.getCurrentWindow..
[Electron] img 태그 src="file://~" 경로에 존재하는 파일이 로드되지 않는 경우 해결 방법 1. 오류 WebRoot 경로 및 하위 폴더에 존재하는 이미지는 상대 경로로 입력하여 이미지를 불러올 수 있지만, 로컬에 존재하는 파일 또는 다른 서버에 존재하는 파일을 로드할 경우, 절대 경로로 입력해 주어야 한다. C:/나 D:/ 등 마운트된 디렉토리는 정상적으로 접근해서 이미지를 로드했지만, 외부(다른) 서버에 존재하는 파일을 파일은 존재한다고 출력은 되나, 이미지를 불러오지 못했다. 아래 코드를 실행해 보면 image1은 이미지가 보이지만, image2는 이미지가 보이지 않았다. const fs = require("fs"); var image1 = document.createElemen..
[JavaScript] html2canvas html2canvas [링크] 웹(html)에서 화면을 캡쳐하는 기능. 실질적으로는 선택한 요소를 Canvas에 그린다. 하위 자식들까지 모두 canvas에 그릴 수 있다. # Body 안의 모든 요소를 Canvas에 그릴 경우 html2canvas(document.body, { backgroundColor: "#000000" // 배경 색 선택. 기본값 : 흰색 }).then(function(canvas) { var base64image = canvas.toDataURL("image/png"); window.open(base64image , "_blank"); // Open the image in a new window }); # 특정 div만 선택할 경우 ..
