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 回答