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

现在我可以保存zip文件：）

但是我仍然有问题... 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()在你的版本和最新版本之间没有变化。

将客户端上的图像下载到zip

1 个答案: