Convertir l'image en base64 sans serveur

Question

J'utilise le SDK Javascript Pinterest pour essayer de créer une épingle. Les paramètres pour définir l'image sont 1 de l'un ou de l'autre;

image - Télécharger l'image que vous souhaitez épingler à l'aide des données de formulaire multipart

image_url - le lien vers l'image que vous voulez à la broche ou

image_base64 - Le lien d'une image codée base64

J'essaye de créer le Pin du côté du client, sans passer par un serveur. Ma forme est tout simplement:

<div class="file-upload"> 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
</div> 

et je lis la valeur de qu'utiliser

const imageUrl = document.getElementById('fileToUpload').value; 

J'ai essayé à la fois les paramètres image et image_url d'envoyer cette valeur (imageUrl) à travers, mais parce que la valeur décide à un endroit sur mon disque dur, cela ne fonctionne pas (probablement dans l'expectative).

Alors maintenant, je dois essayer et comprendre comment utiliser l'option image_base64, ce qui signifie que j'ai besoin de convertir l'image en base64 sur la machine de l'utilisateur.

Comment pourrais-je faire cela? Ou mieux encore, si quelqu'un sait comment je peux utiliser le paramètre image, je pense que ce serait beaucoup mieux

Answer 1

Vous pouvez utiliser l'événement change attaché à l'élément <input type="file">, FileReader pour convertir File objet à l'élément <input type="file">.files de propriété à un data URI ou base64 partie de l'intérieur data URI gestionnaire d'événements change

<div class="file-upload"> 
 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
 
</div> 
 
<script> 
 
    const input = document.getElementById("fileToUpload"); 
 
    const reader = new FileReader; 
 
    reader.onload =() => { 
 
    const dataURL = reader.result; 
 
    const base64 = reader.result.split(",").pop(); 
 
    console.log(dataURL, base64); 
 
    } 
 
    input.onchange =() => { 
 
    reader.abort(); 
 
    reader.readAsDataURL(input.files[0]); 
 
    } 
 
</script>