Проблема, с которой вы сталкиваетесь, напрямую не связана с fabricjs (ни холстом, ни даже javascript btw), но исходит из ограничений, которые имеют некоторые браузеры (включая Chrome) на максимальной длине для атрибута src
привязки Элемент () с атрибутом donwload.
Когда этот предел будет достигнут, тогда единственное, что у вас есть, - это неуправляемая «сетевая ошибка» в консоли; загрузка не удалась, но вы, как разработчик, не можете знать об этом.
Как было предложено в этом (вы отказались от метки-как) duplicate , решение должно либо напрямую получить Blob, если доступно (для холста вы можете вызвать его метод toBlob()
или сначала преобразовать ваш dataURI в Blob, а затем создать URL-адрес объекта из этого Blob.
У Fabricjs пока не реализована функция toBlob
, поэтому в вашем конкретном случае вам нужно будет сделать это позже. Вы можете найти много сценариев для преобразования dataURI в Blob, один из которых доступен в метод полифония MDN - Canvas.toBlob()
.
Тогда он будет выглядеть следующим образом:
// 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);
Чтобы дать вам очень простой пример:
Допустим, у вас есть строка "123"
. Соответствующие символы имеют ^
внизу в следующих примерах.
Regex: \d+?.
частичное совпадение!
123 # The \d+? eats only 1 because he's lazy (on a diet) and leaves the 2 to the .(dot). ^^ # This means \d+? eats as little as possible.
Regex: \d+.
полное совпадение!
123 # The \d+ eats 12 and leaves the 3 to the .(dot). ^^^ # This means \d+ is greedy but can still share some of his potential food to his neighbour friends.
Регулярное выражение: \d++.
нет совпадения!
123 # The \d++ eats 123. He would even eat more if there were more numbers following. # This means \d++ is possessive. There is nothing left over for the .(dot), so the pattern can't be matched.