Y a-t-il un script (JavaScript / Client côté). Qui créent des uris de données à la volée. Maintenant, je crée des uRis de données avec un créateur de base64 en ligne. Puis mettre cette sortie dans le fichier CSS. Mais quand je change les images. C'est beaucoup de travail à le faire. Y a-t-il un script, qui peut le faire pour moi.
3 Réponses :
Les navigateurs modernes ont maintenant un bon support pour le codage et le décodage de base64 . Il existe deux fonctions respectivement pour le décodage et le codage de la base64 cordes:
En tant que solution complète de votre scénario, vous pouvez utiliser p> extraire code> pour obtenir une représentation code> blob code> de votre image, puis utilisez fileader code> à Convertir le blob dans son base64 code> représentation
// get an image blob from url using fetch
let getImageBlob = function(url){
return new Promise( async resolve=>{
let resposne = await fetch( url );
let blob = resposne.blob();
resolve( blob );
});
};
// convert a blob to base64
let blobToBase64 = function(blob) {
return new Promise( resolve=>{
let reader = new FileReader();
reader.onload = function() {
let dataUrl = reader.result;
resolve(dataUrl);
};
reader.readAsDataURL(blob);
});
}
// combine the previous two functions to return a base64 encode image from url
let getBase64Image = async function( url ){
let blob = await getImageBlob( url );
let base64 = await blobToBase64( blob );
return base64;
}
// test time!
getBase64Image( 'http://placekitten.com/g/200/300' ).then( base64Image=> console.log( base64Image) );
Cela a l'avantage de travailler dans Safari, où URL.CreateObjecturl () a des problèmes dans des versions ultérieures de Safari.
Un moyen est de créer un blob d'un Objet, puis utiliser URL.CreateObjecturl ()
p>
let a = URL.createObjectURL(new Blob([JSON.stringify({whatever: "String..."}, null, 2)]))
console.log(a)
Qu'en est-il de les pointer en réalité?
Vous pouvez signaler à l'image, comme
arrière-plan-image: URL ('image.png')@Dani non si le serveur nécessite des en-têtes personnalisés.