从客户端下载图片到zip

Question

好的，所以我想要做的是下载存储在JavaScript数组中的AngularJS中的多个图像。我还没有找到以“纯”图像(如.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文件：)

不过我还是有问题..。拉链里的文件都被破坏了..。

正常的非损坏图像如下：

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

如果我将"currupt“图像上传到我的网站agian并检查损坏图像的范围，数据如下所示：

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

或者，删除{base64: true}：

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

我能做些什么？

Answer 1

我把答案放在这里供将来参考(因为它被埋没在评论中)。

这个问题来自$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()在您的版本和最新版本之间没有改变)。