fumo.no-bull.sh
preload images via blob instead of canvas
+6
-25
+6
-25
src/js/main.js
+6
-25
src/js/main.js
···
766
766
const totalLength = characterDataToSort.length;
767
767
let imagesLoaded = 0;
768
768
769
-
const loadImage = (src, idx) => {
770
-
return new Promise((resolve, reject) => {
771
-
const img = new Image();
772
-
773
-
img.crossOrigin = 'Anonymous';
774
-
img.onload = () => {
775
-
setImageToData(img, idx);
776
-
resolve(img);
777
-
};
778
-
img.onerror = img.onabort = () => reject(src);
779
-
if ( img.complete || img.complete === undefined ) {
780
-
img.src = src;
781
-
}
782
-
img.src = src;
783
-
});
784
-
};
785
-
786
-
const setImageToData = (img, idx) => {
787
-
const canvas = document.createElement('canvas');
788
-
canvas.width = img.naturalWidth;
789
-
canvas.height = img.naturalHeight;
790
-
canvas.getContext('2d').drawImage(img, 0, 0);
791
-
characterDataToSort[idx].img = canvas.toDataURL();
769
+
const loadImage = async (src) => {
770
+
const res = await ((await fetch(src)).blob());
792
771
progressBar(`Loading Image ${++imagesLoaded}`, Math.floor(imagesLoaded * 100 / totalLength));
772
+
return URL.createObjectURL(res);
793
773
};
794
774
795
-
const promises = characterDataToSort.map((char, idx) => loadImage(imageRoot + char.img, idx));
796
-
return Promise.all(promises);
775
+
return Promise.all(characterDataToSort.map(async (char, idx) => {
776
+
characterDataToSort[idx].img = await loadImage(imageRoot + char.img);
777
+
}));
797
778
}
798
779
799
780
/**