Convertir l'image en base64 chaîne de caractères en Javascript

Je suis en train de convertir un local image en Base64 chaîne. Je ne suis pas à l'aide de code HTML et tout simplement besoin de javascript qui référence l'image du chemin d'accès dans le code.

Par exemple, la conversion:

C:\Users\Work\Desktop\TestImage.jpg

en

/9j/4AAQSkZJRgABAQEASABIAAD/4QBKRXhpZgAASUkqAAgAAAADABoBBQABAAAAMgAAABsBBQABAAAAOgAAACgBAwABAAAAAgAAAAAAAAAAVOoqgJaYAABU6iqAlpgA/+IMWElDQ19QUk9GSUxFAAEBAAAMSExpbm8CEAAAbW50clJHQiBYWVogB84AAgAJAAYAMQAAYWNzcE1TRlQAAAAASUVDIH.....etc...

Il y a beaucoup de messages comme celui-ci, mais ils semblent tous d'utiliser HTML, d'une certaine façon, afin d'identifier le chemin d'accès au fichier. J'espère que je peux écrire un définies filepath dans le javascript.

J'ai essayé en vain:

function convertImgToBase64()
{
    var canvas = document.createElement('CANVAS');
    img = document.createElement('img'),
    img.src = C:\Users\Work\Desktop\TestImage.jpg;
    img.onload = function()
    {
        canvas.height = img.height;
        canvas.width = img.width;
        var dataURL = canvas.toDataURL('image/png');
        alert(dataURL);
        canvas = null; 
    };
}

Un exemple a la suite de html et de javascript, mais j'espère que cela peut être consolidés. Merci pour votre soutien

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>


<input type='file' id="asd" />
<br>
<img id="img" src="//placehold.it/1x1/" />
<div id="base"></div>
</body>
</html>

Javascript:

function el(id){return document.getElementById(id);} //Get elem by ID

function readImage() {
    if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
             el("img").src = e.target.result;
             el("base").innerHTML = e.target.result;
        };       
        FR.readAsDataURL( this.files[0] );
    }
}

el("asd").addEventListener("change", readImage, false);\

Sa démo trouvé ici

OriginalL'auteur Mathomatic | 2015-09-29

  1. 8

    Essayer en utilisant XMLHttpRequest() ensemble responseType à Blob , utilisez FileReader() à XMLHttpRequest onload événement pour lire la réponse que data URI

    var xhr = new XMLHttpRequest();       
    xhr.open("GET", "/path/to/local/image/file", true); 
    xhr.responseType = "blob";
    xhr.onload = function (e) {
            console.log(this.response);
            var reader = new FileReader();
            reader.onload = function(event) {
               var res = event.target.result;
               console.log(res)
            }
            var file = this.response;
            reader.readAsDataURL(file)
    };
    xhr.send()
    Cool, apprécie l'aide.
    Cela ne fonctionne pas pour les fichiers référencés sans être hébergés sur un sever, il ne fonctionnera pas pour le chemin d'accès ci-dessus mentionnés "C:\Users\Work\Desktop\TestImage.jpg" comme origine de la Croix demandes sont prises en charge uniquement pour les protocoles tels que http
    Voir stackoverflow.com/questions/32996001/..., stackoverflow.com/questions/41279589/read-local-xml-with-js

    OriginalL'auteur guest271314