서버없이 base64로 이미지 변환

Question

핀을 만들려 고 시도하려면 Pinterest Javascript SDK를 사용하고 있습니다. 이미지를 설정하는 매개 변수는 둘 중 하나입니다.

image - 당신이 핀에 원하는 이미지로 링크, 또는

image_base64 - - 당신은 다중 폼 데이터

image_url 사용하여 고정 할 이미지를 업로드 Base64로 인코딩 된 이미지의 링크를

서버를 거치지 않고 클라이언트 측에서 Pin을 생성하려고합니다. 나의 양식은 간단하다 :

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

난을 통해 그 값 (imageUrl)을 보내

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

내가 시도 모두 image 및 image_url 매개 변수를 사용하여 해당 값을 읽을 수 있지만 값 결의 때문에 내 하드 드라이브의 한 곳으로 가면 작동하지 않습니다 (아마 예상대로).

이제는 image_base64 옵션을 사용하는 방법을 알아 내려고합니다. 즉, 이미지를 사용자 컴퓨터에서 base64로 변환해야합니다.

어떻게 할 수 있습니까? 누군가가 내가 image 매개 변수를 사용하는 방법을 알고 있다면 또는 더 나은 아직, 내가 그 훨씬 더 좋을 것이라고 생각

Answer 1

당신이 <input type="file"> 요소 .files 시설에 File 개체를 변환하는 <input type="file"> 요소 FileReader에 부착 change 이벤트를 사용할 수있는 data URI 또는 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>