サーバを使わずに画像をbase64に変換する

Question

私はPinterest Javascript SDKを使用してピンを作成しています。画像を設定するパラメータは、どちらか1つです。

image - あなたがピンにしたい画像へのリンク、または

image_base64 - - Base64でエンコードされた画像

のリンクあなたは

image_urlをマルチパートフォームデータを使用してピンにしたい画像をアップロード

私は、サーバーを経由せずに、クライアント側からピンを作成しようとしています。

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

と私は通じますが、値解決されるため（imageUrl）、その値を送信するために、両方のimageとimage_urlパラメータを試してみました

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

を使用してその値を読む：私のフォームは単純です私のハードドライブ上の場所に、それは動作しません（おそらく予期せず）。

これで、image_base64オプションを使用する方法を理解する必要があります。つまり、イメージをユーザーのマシン上でbase64に変換する必要があります。

どうすればいいですか？いっそ、誰かが私はimageパラメータを使用することができる方法を知っているならば、私はそれが

Answer 1

はるかに良いことだと思うあなたはdata URIに<input type="file">要素.filesプロパティでFileオブジェクトを変換するために<input type="file">要素に添付changeイベント、FileReaderを使用することができますかchangeイベントハンドラ内data URIのbase64部分

<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>