Comment convertir une URL de données en Blob en JavaScript ?

Conversion d'URL de données en blobs

Transformer des données arbitraires en URL de données à l'aide de readAsDataURL() de FileReader est une technique utile. Cependant, que se passe-t-il si vous devez reconvertir cette URL de données en instance Blob ?

Conversion native du navigateur

Actuellement, il n'existe aucune API de navigateur intégrée qui convertit directement les URL de données en Blobs. Cependant, il existe des solutions de contournement qui utilisent du code JavaScript personnalisé.

Solution JavaScript personnalisée

Une méthode largement acceptée a été proposée par Matt sur Stack Overflow (Comment convertir dataURL en objet fichier en javascript ?). Voici une version mise à jour de son code :

<code class="javascript">function dataURItoBlob(dataURI) {
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);

  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  const blob = new Blob([ab], { type: mimeString });
  return blob;
}</code>

Utilisation

Vous pouvez désormais utiliser dataURItoBlob() pour transformer votre URL de données en objet Blob :

<code class="javascript">const dataURL = 'data:image/png;base64,...';
const blob = dataURItoBlob(dataURL);</code>

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!