Premier temps à poster, c'est l'ensemble du code (la majorité de ce que j'ai trouvé en ligne et modifié certaines choses pour servir mon but), mais, plus précisément, mon erreur est vers la fin où je reçois.
Uncaught TypeError: Échec de l'exécution de 'createObjectURL' sur 'URL': résolution de Surcharge a échoué.
Lorsque j'utilise simplement saveAs(img_url, "img.png"), la possibilité de sauvegarder à l'ordinateur portable s'affiche. Mais je reçois le message d'erreur je l'ai mentionné ci-dessus lors de l'utilisation de "contenu". J'ai filesaver et jszip dans le script, je n'arrive pas à trouver de toute façon de corriger l'erreur, puis qui s'arrête l'exécution de quelque chose de plus. Désolé pour le code désordre, vraiment heureux d'aider.
La partie principale est vers le bas, le reste est là juste au cas où quelqu'un voudrait voir. Theres l'url à goutte puis le canevas générateur, je ne sais pas pourquoi il ne sera pas sauvegardé.
!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");
});
}();