Récemment, de nombreux sites Web ont rencontré des problèmes de code tronqué lors de l'utilisation de Javascript pour encoder des images et du texte en Base64. Cette situation est généralement causée par des erreurs dans la méthode ou le processus de codage. Afin de résoudre ces problèmes, nous devons avoir une compréhension approfondie du codage Base64 en Javascript et comment l'utiliser correctement.
Qu'est-ce que Base64 ?
Base64 est une méthode de codage de données binaires en caractères ASCII. Il convertit 3 octets de 8 bits en 4 octets de 6 bits et complète le résultat dans une chaîne ASCII en utilisant l'un des 64 caractères du jeu de caractères spécifié. Lors de la transmission de données, Base64 est généralement utilisé pour convertir les données binaires en caractères ASCII afin qu'elles ne soient pas traitées incorrectement lors de la transmission. Il est fréquemment utilisé pour le courrier électronique et le transfert de données.
Utilisez l'implémentation de Base64 en Javascript
Il existe déjà une implémentation de Base64 en Javascript, il n'est donc pas nécessaire d'écrire l'algorithme vous-même. Nous pouvons utiliser la méthode window.btoa() pour encoder en Base64 la chaîne et la méthode window.atob() pour la décoder de manière inversée. Ces méthodes fonctionnent uniquement avec les caractères ASCII et ne sont pas prises en charge dans les navigateurs inférieurs à IE9.
Par exemple :
var str = "Hello World"; var encodedString = window.btoa(str); // 编码 var decodedString = window.atob(encodedString); // 解码 console.log(encodedString); // SGVsbG8gV29ybGQ= console.log(decodedString); // Hello World
Lors de l'encodage d'images ou d'autres données binaires, nous devons les transmettre sous forme de vues de données binaires à la méthode window.btoa(), par exemple :
var byteArray = new Uint8Array([73, 69, 78, 68, 255, 216, 255]); var encodedString = window.btoa(String.fromCharCode.apply(null, byteArray)); // 编码 console.log(encodedString); // SU5ET1+J/g==
Ici, nous utilisons String.fromCharCode.apply(null , byteArray) convertit la vue de données binaires en une chaîne normale, puis l'encode.
Comment résoudre le problème de l'encodage en Base64 des caractères tronqués
L'encodage en Base64 des caractères tronqués est généralement dû aux raisons suivantes :
Les façons de résoudre ces problèmes sont les suivantes :
var str = "你好世界"; var encodedString = window.btoa(unescape(encodeURIComponent(str))); // 使用第三方库 console.log(encodedString); //5L2g5aW977yM5LiW55WM
Ici, unescape(encodeURIComponent(str)) est utilisé pour convertir la chaîne codée UTF-8 en chaîne ASCII, puis window.btoa() est utilisé pour l'encoder.
var byteArray = new Uint8Array([73, 69, 78, 68, 255, 216, 255]); var blob = new Blob([byteArray], {type: 'image/jpeg'}); var reader = new FileReader(); reader.onloadend = function() { console.log(reader.result); }; reader.readAsDataURL(blob); // 编码,避免自动添加和 换行符
Ici, utilisez l'objet Blob pour transmettre des données binaires, utilisez FileReader l'objet auquel il est converti en URL de données. Les URL de données ne contiennent pas les caractères de nouvelle ligne et
.
var byteArray = new Uint8Array([73, 69, 78, 68, 255, 216, 255]); var decoder = new TextDecoder('utf-8'); var str = decoder.decode(byteArray); // 将二进制数据数组转换为字符串 var encodedString = window.btoa(str); // 编码 console.log(encodedString);
Ici, nous utilisons l'API TextDecoder pour convertir le tableau de données binaires en chaîne codée en UTF-8, puis l'encoder à l'aide de la méthode window.btoa().
Conclusion
En Javascript, l'utilisation de Base64 pour l'encodage et le décodage est un moyen efficace, mais dans les applications réelles, vous devez faire attention aux détails de son implémentation et aux précautions pour éviter les erreurs d'encodage et les caractères tronqués. L'utilisation de méthodes d'encodage correctes et de bibliothèques tierces pour l'encodage et le décodage, ainsi que l'utilisation de tampons de tableau ou d'objets Blob lors de l'encodage de données binaires peuvent nous aider à résoudre le problème tronqué de Base64.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!