클라이언트에서 이미지를 다운로드하여

Question

Okey, 그래서 AngularJS의 JavaScript 배열에 저장된 여러 이미지를 다운로드하고 싶습니다. 나는 .png .jpg 등의 "순수한"이미지의 형태로이 작업을 수행하는 방법을 찾지 못했습니다 (이 작업을 수행하는 방법을 아는 사람이라면 알려주세요). 그래서 여기에 설명에 따라 jszip.js의 도움으로 이미지를 압축하려고로 전환 한 : 그래서 이것은라는 코드가 http://viralpatel.net/blogs/create-zip-file-javascript/

<li ng-click="download()"><a>Save to harddrive</a></li> 

때 사용자가 클릭 "다운로드"

photodice.controller('ProjectController', function($scope, imageFactory) { 
$scope.images = imageFactory.getImages(); 
$scope.download = function() { 
    var zip = new JSZip(); 
    for (var x in $scope.images) { 
     zip.folder("images").add("image" + x + ".png", $scope.images[x], {base64: true}); 
    } 
    var content = zip.generate(); 
    console.log("content = "+ content); 
    location.href="data:application/zip;base64," + content; 
} 
}); 

마지막 줄의 코드가 실행될 때 브라우저가 충돌 할 때 문제가 발생합니다 ... filedownloads 작동 방식을 이해하지 못합니다. 내가 읽어야하는 제안이나 팁이 크게 감사 할 것입니다!

업데이트 : 나는 ... 내 문제를 해결하기 위해 Downloadify를 사용하여 시도 및 일부 코드 추가 :

$scope.download = function() { 
var zip = new JSZip(); 
for (var x in $scope.images) { 
    zip.folder("images").add("image" + x + ".jpg", $scope.images[x], {base64: true}); 
} 
Downloadify.create('downloadify',{ 
    filename: function(){ 
    return "Images.zip"; 
}, 
    data: function(){ 
    return zip.generate(); 
},  
    onComplete: function(){ 
    alert('Your File Has Been Saved!'); 
}, 
    onCancel: function(){ 
    alert('You have cancelled the saving of this file.'); 
}, 
    onError: function(){ 
    alert('You must put something in the File Contents or there will be nothing to save!'); 
}, 
transparent: false, 
swf: 'downloadify.swf', 
downloadImage: 'img/download.png', 
width: 100, 
height: 30, 
transparent: true, 
append: false, 
dataType: 'base64' 
}); 

을 그리고 지금 나는 그러나 나는 아직도 문제가있는 압축 파일 :

을 절약 할 수 있습니다 ... 압축에있는 파일은

정상이 아닌 손상된 이미지는 다음과 같이 ... 부패 :

"data:image/jpeg;base64,iVBORw0KGgoAhE... ...c8+ocAAAAORK5CYII=" 

,

내 사이트 agian에 "currupt"이미지를 업로드하고 데이터가 다음과 같습니다 손상되는 이미지의 범위를 확인하는 경우 :

"data:image/jpeg;base64,ZGF0YTppbWF... ...WT1JLNUNZSUk9" (no "=" at the end) 

:

"data:image/jpeg;base64,dataimage/jpegbase64iVBORw0KA... ...RNgAK5CYII=" 

가 또는 내가 {: 사실 64 기수를} 제거를

어떻게해야합니까?

Answer 1

나는 (코멘트에 묻었 기 때문에) 나중에 참조 할 수 있도록 여기에 답을하고 있습니다.

"data:image/jpeg;base64,iVBORw0KGgoAhE... ...c8+ocAAAAORK5CYII=" 문자열이 포함 된 $scope.images[x]에서 문제가 발생합니다. JSZip은 data:image/jpeg;base64, 부분을 base64 콘텐츠로 해석하고 손상된 이미지를 생성합니다. 이 부분을 제거하려면 다음을 수행 할 수 있습니다

또한

var base64 = $scope.images[x]; 
var index = base64.indexOf(","); 
if (index !== -1) { 
    base64 = base64.substring(index + 1, base64.length); 
} 
zip.folder("images").file("image" + x + ".jpg", base64, {base64: true}); 

, 당신이 2011 년에 삭제 된 사용 add() 방법은 그래서 당신은 JSZip를 업데이트 할 수 있습니다! (하지만 약간의 작업이 필요할 수도 있습니다 : folder() 및 remove()은 버전과 최신 버전간에 변경되지 않았습니다).