2

さて、私がやりたいことは、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;
}
});

コードの最後の行が実行されたときに問題が発生し、ブラウザがクラッシュします...ファイルのダウンロードがどのように機能するかよくわかりません...何を読むべきかについての提案やヒントは大歓迎です!

更新: 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'
});

そして今、私はzipファイルを保存することができます:)

ただし、まだ問題があります... zip 内のファイルが破損しています...

通常の破損していない画像は次のようになります。

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

「壊れた」画像をサイトにアップロードし、破損している画像の範囲を確認すると、データは次のようになります。

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

または、{base64: true} を削除します。

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

これについて何ができますか？

4

1 に答える 1

2

将来の参考のためにここに答えを入れています（コメントに埋もれていたため）。

この問題は$scope.images[x]、文字列"data:image/jpeg;base64,iVBORw0KGgoAhE... ...c8+ocAAAAORK5CYII=". 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});

また、add()使用しているメソッドは 2011 年に削除されているため、JSZip を更新することをお勧めします。（ただし、それにはいくつかの作業が必要になる場合があります。バージョンと最新の間で変更されていないだけです）folder()。remove()

于 2014-05-13T20:04:29.757 に答える