Il problema che si trovano ad affrontare non è direttamente correlata alla fabricjs, (né tele e nemmeno javascript btw) , ma deriva dalle limitazioni che alcuni browser (incluso Chrome) hanno sulla lunghezza massima per l'attributo src
di un elemento di ancoraggio (<a>
) con l'attributo donwload.
Quando si raggiunge questo limite, l'unica cosa che si ottiene è "Errore di rete" non gestibile nella console; il download non è riuscito, ma tu come lo sviluppatore non puoi conoscerlo.
Come proposto in questa (si-rifiutato-to-mark-as)duplicate, la soluzione è o di ottenere direttamente un Blob quando disponibile (per tela, si può chiamare il suo metodo toBlob()
, o al primo convertito i tuoi dataURI ad un Blob, e quindi creare un object URL da questa Blob.
Fabricjs non sembra avere una funzione toBlob
ancora attuata, così nel tuo caso esatto, dovrete fare più tardi.
È può trovare molti script per convertire dataURI in Blob, uno è disponibile nel metodo MDN's polyfill a Canvas.toBlob()
.
Allora sarebbe simile a questa:
// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
function dataURIToBlob(dataURI, callback) {
var binStr = atob(dataURI.split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr]));
}
var callback = function(blob) {
var a = document.createElement('a');
a.download = fileName;
a.innerHTML = 'download';
// the string representation of the object URL will be small enough to workaround the browser's limitations
a.href = URL.createObjectURL(blob);
// you must revoke the object URL,
// but since we can't know when the download occured, we have to attach it on the click handler..
a.onclick = function() {
// ..and to wait a frame
requestAnimationFrame(function() {
URL.revokeObjectURL(a.href);
});
a.removeAttribute('href')
};
};
dataURIToBlob(yourDataURL, callback);
Hai questo errore solo su chrome? se è così, questo è probabilmente correlato: http: // StackOverflow.it/questions/36918075/is-it-possible-to-programmatically-detect-size-limit-for-data-url/36951356 ma per il tuo caso d'uso, invece di chiamare 'toBlob' (che non credo sia disponibile in fabricjs), dovrai convertire il dataURI in un blob prima di impostare l'href dell'ancora sull'URL dell'oggetto di questo blob. (puoi controllare [MDN's polyfill for 'toBlob'] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill) e scegliere il loro modo di convertire un dataURI in un BLOB) – Kaiido
devo semplicemente impostare il valore href su blob? – Abhinav
no a un oggetto URL creato dal blob ('URL.createObjectURL (blob)'). Controlla la risposta sul dupe proposto. – Kaiido