1
這是我的問題,我無法通過Google搜索後使用jsZip
來提取圖像。我發現solution只能幫助我在頁面加載開始時壓縮文件。如何將jsZip用於位於同一服務器上的圖像url
這裏是我的代碼
<table class="table table-condensed" id="downloadTable">
<thead>
<tr>
<th>Select</th>
<th>File name</th>
<th>Image</th>
<th>Option</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" id="file1" name="file" value="https://bibekshakya35.github.io/img/image-me.jpg" />
</div>
</td>
<td>file1</td>
<td><a target="_self" href="https://bibekshakya35.github.io/img/image-me.jpg" class="btn btn-block" download="file1"/>file1</a></td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name="file" id="file2" value="https://bibekshakya35.github.io/img/portfolio/bullock/2.JPG" />
</div>
</td>
<td>file2</td>
<td><a target="_self" href="https://bibekshakya35.github.io/img/portfolio/bullock/2.JPG" class="btn btn-block" download="file2"/>file2</a></td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name="file" id="file3" value="https://bibekshakya35.github.io/img/portfolio/bullock/3.JPG" />
</div>
</td>
<td>file3</td>
<td><a target="_self" href="https://bibekshakya35.github.io/img/portfolio/bullock/3.JPG" class="btn btn-block" download="file3"/>file3</a></td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name="file" id="file4" value="https://bibekshakya35.github.io/img/portfolio/bullock/4.JPG" />
</div>
</td>
<td>file4</td>
<td><a target="_self" href="https://bibekshakya35.github.io/img/portfolio/bullock/4.JPG" class="btn btn-block" download="file4"/>file4</a></td>
</tr>
</tbody>
</table>
<input type="button" id="lnk" onclick="alert(getCheckedCheckboxesFor('file'));" value="Get Values" />
這裏是js代碼
<script type="text/javascript">
var images = [];
var counter = 0;
var values = [];
function getCheckedCheckboxesFor(checkboxName) {
var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), values = [];
Array.prototype.forEach.call(checkboxes, function (el) {
values.push(el.value);
});
for (var i = 0; i < values.length; i++) {
convertImgToBase64URL(values[i], function (base64Img, url) {
images.push({
url: url,
data: base64Img
});
counter++;
if (counter === values.length) {
createArchive(images);
}
});
}
return values;
}
function convertImgToBase64URL(url, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL, url);
canvas = null;
};
img.src = url;
}
function createArchive(images) {
// Use jszip
var zip = new JSZip();
var img = zip.folder("images");
for (var i = 0; i < images.length; i++) {
img.file(images[i].url, images[i].data, {base64: true});
}
var content = zip.generate({type: "blob"});
// Use FileSaver.js
saveAs(content, "images.zip");
}
</script>
幾個調試運行,我發現var content = zip.generate({type: "blob"});
說內容類型取消定義之後。任何人有一個想法是什麼問題?