캔버스 이미지 저장 방법 서버에 업로드하기 전에?

Question

기본적으로 일부 html5 vidoe, canvas 및 button 태그를 사용하여 이미지를 캡처하고 있지만이 이미지를 서버에 업로드하기 전에 이미지를 인터넷 임시 디렉토리에 저장 한 다음 이미지에 액세스하여 이미지를 업로드해야합니다. 서버, 지금까지 내가 할 수있는 캔버스의 이미지를 캡처 할 수 있지만 로컬 PC의 인터넷 임시 디렉토리에 저장하는 방법을 몰라, 나는 이미 답이

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); window.location.href=image;

을했다 질문을 발견 위의 코드에서 문제는 클라이언트에 다운로드 상자를 띄우고 클라이언트에 저장 위치를 ​​요청하지만 아무 것도 묻지 않고 이미지를 저장해야한다는 것입니다. o 사용자를 차단하고 인터넷 임시 디렉터리에 저장하십시오. 여기

나는 누군가가 내가 이미지를 저장 eventListener 이상에 추가하려면 어떤 코드 말해 그래서 만약 내가 정말 감사하겠습니다 캔버스 이미지

document.getElementById("snapButton").addEventListener("click", function() { 
context.drawImage(video, 0, 0, 640, 480); 
var myImg = document.getElementById("myImg"); 
myImg.src = canvas.toDataURL(); 
}); 

을 코드입니다.

Answer 1

작은 데이터 조각 (< 5MB)을 보유하기위한 임시적인 장소가 필요하다면 localStorage을 사용할 수 있습니다. localStorage을 앱 데이터의 로컬 임시 저장 영역으로 생각하십시오. LocalStorage에는 사용자의 권한이 필요하지 않습니다.

그러나 확실한 보안상의 이유로 사용자의 디스크에 아무 것도 저장하면 사용자의 팝업을 피할 수 없도록 권한이 필요합니다.