Poprvé vysílání, toto je celý kód (většina z toho co jsem našel na internetu a vylepšil některé věci sloužit svému účelu), ale konkrétně, moje chyba je na konci, kde jsem si.
Uncaught TypeError: Nepodařilo se spustit 'createObjectURL' na 'URL': Přetížení rozlišení se nezdařilo.
Když jsem jednoduše pomocí saveAs(img_url, "img.png"), možnost uložit do notebooku objeví. Ale já jsem si chyby, které jsem zmínil výše, když se snaží použít "obsahu". Mám filesaver a jszip ve scénáři, já prostě nedokážu najít žádný způsob, jak opravit chyby, které pak zastaví provádění, nic víc. Omlouvám se za chaotický kód, bych opravdu ocenil pomoc.
Hlavní část je ke spodní části, zbytek je tam jen pro případ, že by někdo vidět. Tady je url na blob pak plátno generátor, jen nevím, proč to nezachrání.
!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");
});
}();