KineticJS JavaScript 저장 FileSystem 옵션

Question

나는 KineticJS를 사용하여 html5, css 및 javascript를 사용하는 독립 실행 형 응용 프로그램 인 웹 응용 프로그램을 만듭니다.

나는 현재 캔버스를 imageURI로 변환하기 위해 다음과 같은 코드를 가지고있다.

function save() 
{ 
    stage.toDataURL({ 
     callback: function(imageURL) { 
      window.open(imageURL); 
     }, 
     mimeType: 'image/png', 
     quality: 1, 
     height: 480, 
     width: 640 

    }); 
} 

버튼의 onclick 속성을 사용하여 save()가 트리거됩니다.

나는 두 가지 문제가 해결되어야한다 : - 내가 열 수 있도록하려면

1. 나는이 저장 버튼을 클릭하면 "다른 이름으로 저장"대화 상자.
2. "download.png"대신 파일 이름을 변경하여 파일 이름으로 날짜 시간을 표시하십시오. 예 : "020420130306PM.png"(날짜 02/04/2013 시간 0306)
3. 내 무대 크기는 958 X 598이고 파일을 640 X 480로 저장하려고합니다. toDataURL 함수의 높이 및 너비 특성 만 캔버스의 상단 640 x 480 픽셀을 잘라냅니다. 어떻게 전체 스테이지 (958 X 598)를 (640 X 480)으로 압축하고 저장합니까?

내 현재의 솔루션은 저장 버튼을 클릭이다 KineticJS 튜토리얼에 명시된 하나, 새 페이지 캔버스의 이미지와 함께 열립니다 오른쪽 020420130306PM에 download.png에서 파일의 이름을 변경, 이미지를 클릭 이미지로 저장합니다. png를 클릭하고 저장을 클릭하십시오.

setScale 메서드를 사용하여 세 번째 파트를 해결했으며 완벽하게 정상적으로 작동했습니다.

Answer 1

파일의 이름을 바꾸는 두 번째 부분을 해결했지만 크롬 브라우저로 제한되어 있으며 기본 다운로드 폴더가 아닌 다른 위치에 파일을 저장할 수있는 기능이 없습니다.

<a> 태그에 download 속성이 있습니다. download = "myfilename.png"이면 파일은 myfilename.png

으로 다운로드됩니다. 먼저 브라우저에서 파일을 다운로드하도록하려면 imageURI를 수정해야합니다.

var newImageURL = imageURL.replace("data:image/png;base64","data:image/octet-stream;base64");

지금, 속성을 추가하거나 수정하는 단지 click()과 함께 jQuery를 attr() 기능을 사용하십시오. 예를 들어,

$('#saveAnchor').attr('download',filename); 
$('#saveAnchor').attr('href',newImageURL); 

그리고 지금 그래서 기본적으로 save()가 호출 될 때 $('#saveAnchor')[0].click();

를 사용하여 앵커 링크에 가짜 클릭을 유발, 위의 모든 콜백 함수에서 발생합니다.

그러나 나는 PHP 나 AJAX를 사용하지 않고 "다른 이름으로 저장"대화 상자를 사용하여 이미지를 저장할 수있는 가능한 방법이 있는지 알고 싶습니다.