將圖像轉換爲base64而不需要服務器

我正在使用Pinterest Javascript SDK嘗試創建一個圖釘。設置圖像的參數是1;將圖像轉換爲base64而不需要服務器

image - 將圖像上傳你想使用多形式的數據

image_url引腳 - 鏈接到要固定圖像，或

image_base64 - Base64編碼的圖像的鏈接

我正在嘗試從客戶端創建Pin，而無需通過服務器。我的形式很簡單：

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

和我讀到使用

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

我已經試用過image和image_url參數發送通過值（imageUrl）的的那個值，但由於價值做出決議到我硬盤上的某個地方，它不起作用（可能是預期的）。

所以現在我必須嘗試弄清楚如何使用image_base64選項，這意味着我需要將圖像轉換爲用戶計算機上的base64。

我該怎麼做呢？或者更好的是，如果有人知道我怎麼可以使用image參數，我認爲這將是更好的

來源

2017-10-14 Denno

[CONVERT Image url to Base64]可能重複（https://stackoverflow.com/questions/22172604/convert-image-url-to-base64） – Tor

您可以使用連接到<input type="file">元素，FileReader到File對象轉換爲<input type="file">元素.files財產change事件到data URI或內change事件處理程序的data URIbase64部

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

來源

2017-10-14 22:58:03 guest271314

將圖像轉換爲base64而不需要服務器

回答

相關問題