Konvertieren Sie das lokale Bild in den base64-String in Javascript

Ich versuche ein @ zu konvertierloka image to Base64 string. Ich verwende kein HTML und benötige einfach Javascript, das auf den Pfad des Bildes im Code verweist.

Zum Beispiel konvertieren:

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

i

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

Es gibt viele Posts wie diesen, aber alle scheinen HTML in irgendeiner Weise zu verwenden, um den Dateipfad zu identifizieren. Ich hoffe ich kann einen definierten Dateipfad schreibeninnerhal das Javascript.

Ich habe es erfolglos versucht:

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

Ein Beispiel hat das folgende HTML und Javascript, aber ich hoffe, dass dieses zusammen konsolidiert werden kann. Danke für deine Unterstützun

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);\

Ihre Demo hier gefunden

Antworten auf die Frage(2)

Ihre Antwort auf die Frage