第一时间发布,这是整个代码(大多数它的我在网上找到和调整了一些事情要成为我的目的),但是更具体地说,我的错误是朝着结束在那里我得到的。
未捕获的类型错误:未能执行'createObjectURL'on'URL:过载决议失败。
当我简单地使用saveAs(img_url,"img。png"),选择保存到笔记本电脑的出现。 但是我得到的错误我上面提到的当试图使用"内容"。 我filesaver和jszip在脚本,我只是似乎无法找到任何方式来修正这个错误,其后停止执行任何东西更多。 对不起混乱的代码,将非常有帮助。
主要部分是朝底,其余的是没有只是以防有人可能会想看到的。 有url blob然后将画布的发电机,我只是不知道为什么它不会保存。
!function() {
function dataURLtoBlob(dataURL, type) {
var binary = atob(dataURL.split(',')[1]),
length = binary.length,
binaryArray = new Uint8Array(length);
for (var i = 0; i < length; i++) {
binaryArray[i] = binary.charCodeAt(i);
}
return new Blob([binaryArray], {type: type});
}
var SolidImage = function() {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
this.img = new Image();
this.make = function(color) {
canvas.width = 500;
canvas.height = 500;
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FFFFFF";
ctx.textAlign = "center";
ctx.font = "bold 50px Courier New";
ctx.fillText(color.substring(3), 250, 250);
var dataURL = canvas.toDataURL('image/png')
this.img.src = dataURL;
if (this.blobURL) URL.revokeObjectURL(this.blobURL);
this.blob = dataURLtoBlob(dataURL, 'image/png');
this.blobURL = URL.createObjectURL(this.blob);
}
};
var solidImage = new SolidImage(),
button = document.getElementById('make'),
result = document.getElementById('result'),
link = document.createElement('a');
link.setAttribute('target', '_blank');
result.appendChild(solidImage.img);
result.insertAdjacentHTML('beforeend', 'Save this image or<br>');
result.appendChild(link);
solidImage.img.width = 600;
button.addEventListener('click', function(){
var zip = new JSZip();
console.log("after zip");
//var img = zip.folder("rdm_imgs");
//////////////////////////////////
for (var i = 0; i < 1; i++) {
setTimeout(function() {
var rgb_r = Math.floor(Math.random() * (256+1)),
rgb_g = Math.floor(Math.random() * (256+1)),
rgb_b = Math.floor(Math.random() * (256+1)),
random_color = "rgb(" + rgb_r + ", " + rgb_b + ", " + rgb_g + ")";
var filename = random_color.replace(/\s/g, "") + '.png';
solidImage.make(random_color);
link.innerHTML = 'Download content ' + filename;
var img_url = solidImage.blob;
//console.log(img_url.replace(/^data:image\/(png|jpg);base64,/, ""));
console.log(img_url);
//link.setAttribute('href', img_url);
//link.setAttribute('download', filename);
result.className = 'generated';
zip.file(filename, img_url);
},i * 500)}
console.log("after loop");
var content = zip.generateAsync({type:"blob"});
console.log("after zip generate");
saveAs(content, "imgs.zip");
console.log("after saveAs");
//link.innerHTML = 'Download Contents.zip';
//var img_url = solidImage.blobURL;
//link.setAttribute('href', content);
//link.setAttribute('download', "content.zip");
});
}();